@strapi/admin 5.28.0 → 5.30.0

package/dist/admin/admin/src/components/FormInputs/Json.js

@@ -41,7 +41,7 @@ const JsonInput = /*#__PURE__*/ React__namespace.forwardRef(({ name, required, l
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.JSONInput, {
                 ref: composedRefs,
-                value: typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value,
+                value: typeof field.value === 'object' || typeof field.value === 'boolean' || typeof field.value === 'number' ? JSON.stringify(field.value, null, 2) : field.value,
                 onChange: (json)=>{
                     // Default to null when the field is not required and there is no input value
                     const value = required && !json.length ? null : json;

package/dist/admin/admin/src/components/FormInputs/Json.js.map

@@ -1 +1 @@
-{"version":3,"file":"Json.js","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,0BAAYC,gBAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,KAAAA,EACE,OAAOd,KAAAA,CAAMc,KAAK,IAAI,WAAWC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAM,EAAA,CAAA,CAAA,GAAKd,MAAMc,KAAK;AAErFG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,cAAA,CAACH,mBAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,cAAA,CAACH,mBAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,gBAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}
+{"version":3,"file":"Json.js","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value === 'object' ||\n            typeof field.value === 'boolean' ||\n            typeof field.value === 'number'\n              ? JSON.stringify(field.value, null, 2)\n              : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,0BAAYC,gBAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;gBACLU,KACE,EAAA,OAAOd,KAAMc,CAAAA,KAAK,KAAK,QAAA,IACvB,OAAOd,KAAMc,CAAAA,KAAK,KAAK,SAAA,IACvB,OAAOd,KAAAA,CAAMc,KAAK,KAAK,QAAA,GACnBC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAA,EAAM,CAClCd,CAAAA,GAAAA,KAAAA,CAAMc,KAAK;AAEjBG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,cAAA,CAACH,mBAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,cAAA,CAACH,mBAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,gBAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}

package/dist/admin/admin/src/components/FormInputs/Json.mjs

@@ -20,7 +20,7 @@ const JsonInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hint,
             }),
             /*#__PURE__*/ jsx(JSONInput, {
                 ref: composedRefs,
-                value: typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value,
+                value: typeof field.value === 'object' || typeof field.value === 'boolean' || typeof field.value === 'number' ? JSON.stringify(field.value, null, 2) : field.value,
                 onChange: (json)=>{
                     // Default to null when the field is not required and there is no input value
                     const value = required && !json.length ? null : json;

package/dist/admin/admin/src/components/FormInputs/Json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Json.mjs","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;AAcA,MAAMA,0BAAYC,KAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,KAAAA,EACE,OAAOd,KAAAA,CAAMc,KAAK,IAAI,WAAWC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAM,EAAA,CAAA,CAAA,GAAKd,MAAMc,KAAK;AAErFG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,GAAA,CAACH,MAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,GAAA,CAACH,MAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,KAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}
+{"version":3,"file":"Json.mjs","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value === 'object' ||\n            typeof field.value === 'boolean' ||\n            typeof field.value === 'number'\n              ? JSON.stringify(field.value, null, 2)\n              : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;AAcA,MAAMA,0BAAYC,KAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;gBACLU,KACE,EAAA,OAAOd,KAAMc,CAAAA,KAAK,KAAK,QAAA,IACvB,OAAOd,KAAMc,CAAAA,KAAK,KAAK,SAAA,IACvB,OAAOd,KAAAA,CAAMc,KAAK,KAAK,QAAA,GACnBC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAA,EAAM,CAClCd,CAAAA,GAAAA,KAAAA,CAAMc,KAAK;AAEjBG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,GAAA,CAACH,MAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,GAAA,CAACH,MAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,KAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}

package/dist/admin/admin/src/components/FormInputs/String.js

@@ -24,7 +24,8 @@ const StringInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hin
                 ref: composedRefs,
                 onChange: field.onChange,
                 value: field.value ?? '',
-                ...props
+                ...props,
+                type: "text"
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})

package/dist/admin/admin/src/components/FormInputs/String.js.map

@@ -1 +1 @@
-{"version":3,"file":"String.js","sources":["../../../../../../admin/src/components/FormInputs/String.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { TextInput, useComposedRefs, Field } from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { type InputProps, useField } from '../Form';\n\nconst StringInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedStringInput = memo(StringInput);\n\nexport { MemoizedStringInput as StringInput };\n"],"names":["StringInput","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","TextInput","onChange","value","Hint","Error","MemoizedStringInput","memo"],"mappings":";;;;;;;;AAOA,MAAMA,4BAAcC,gBAClB,CAAA,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAqCV,CAAAA,IAAAA,CAAAA;IAEtD,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUd,MAAMc,QAAQ;gBACxBC,KAAOf,EAAAA,KAAAA,CAAMe,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGjB;;AAEN,0BAAAY,cAAA,CAACH,mBAAMS,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAN,cAAA,CAACH,mBAAMU,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,oCAAsBC,UAAK5B,CAAAA,WAAAA;;;;"}
+{"version":3,"file":"String.js","sources":["../../../../../../admin/src/components/FormInputs/String.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { TextInput, useComposedRefs, Field } from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { type InputProps, useField } from '../Form';\n\nconst StringInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n          type=\"text\"\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedStringInput = memo(StringInput);\n\nexport { MemoizedStringInput as StringInput };\n"],"names":["StringInput","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","TextInput","onChange","value","type","Hint","Error","MemoizedStringInput","memo"],"mappings":";;;;;;;;AAOA,MAAMA,4BAAcC,gBAClB,CAAA,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAqCV,CAAAA,IAAAA,CAAAA;IAEtD,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUd,MAAMc,QAAQ;gBACxBC,KAAOf,EAAAA,KAAAA,CAAMe,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGjB,KAAK;gBACTkB,IAAK,EAAA;;AAEP,0BAAAN,cAAA,CAACH,mBAAMU,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAP,cAAA,CAACH,mBAAMW,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,oCAAsBC,UAAK7B,CAAAA,WAAAA;;;;"}

package/dist/admin/admin/src/components/FormInputs/String.mjs

@@ -22,7 +22,8 @@ const StringInput = /*#__PURE__*/ forwardRef(({ name, required, label, hint, lab
                 ref: composedRefs,
                 onChange: field.onChange,
                 value: field.value ?? '',
-                ...props
+                ...props,
+                type: "text"
             }),
             /*#__PURE__*/ jsx(Field.Hint, {}),
             /*#__PURE__*/ jsx(Field.Error, {})

package/dist/admin/admin/src/components/FormInputs/String.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"String.mjs","sources":["../../../../../../admin/src/components/FormInputs/String.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { TextInput, useComposedRefs, Field } from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { type InputProps, useField } from '../Form';\n\nconst StringInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedStringInput = memo(StringInput);\n\nexport { MemoizedStringInput as StringInput };\n"],"names":["StringInput","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","TextInput","onChange","value","Hint","Error","MemoizedStringInput","memo"],"mappings":";;;;;;AAOA,MAAMA,4BAAcC,UAClB,CAAA,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAqCV,CAAAA,IAAAA,CAAAA;IAEtD,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUd,MAAMc,QAAQ;gBACxBC,KAAOf,EAAAA,KAAAA,CAAMe,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGjB;;AAEN,0BAAAY,GAAA,CAACH,MAAMS,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAN,GAAA,CAACH,MAAMU,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,oCAAsBC,IAAK5B,CAAAA,WAAAA;;;;"}
+{"version":3,"file":"String.mjs","sources":["../../../../../../admin/src/components/FormInputs/String.tsx"],"sourcesContent":["import { forwardRef, memo } from 'react';\n\nimport { TextInput, useComposedRefs, Field } from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { type InputProps, useField } from '../Form';\n\nconst StringInput = forwardRef<HTMLInputElement, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField<HTMLInputElement>(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n          type=\"text\"\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedStringInput = memo(StringInput);\n\nexport { MemoizedStringInput as StringInput };\n"],"names":["StringInput","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","TextInput","onChange","value","type","Hint","Error","MemoizedStringInput","memo"],"mappings":";;;;;;AAOA,MAAMA,4BAAcC,UAClB,CAAA,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAqCV,CAAAA,IAAAA,CAAAA;IAEtD,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUd,MAAMc,QAAQ;gBACxBC,KAAOf,EAAAA,KAAAA,CAAMe,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGjB,KAAK;gBACTkB,IAAK,EAAA;;AAEP,0BAAAN,GAAA,CAACH,MAAMU,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAP,GAAA,CAACH,MAAMW,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGF,MAAMC,oCAAsBC,IAAK7B,CAAAA,WAAAA;;;;"}

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

@@ -93,7 +93,10 @@ const Link = (props)=>{
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         tag: "div",
                         lineHeight: "32px",
-                        width: "100%",
+                        width: {
+                            initial: '80dvw',
+                            medium: '100%'
+                        },
                         overflow: "hidden",
                         style: {
                             textOverflow: 'ellipsis',
@@ -136,8 +139,12 @@ const Sections = ({ children, ...props })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         paddingTop: 4,
         paddingBottom: 4,
+        maxWidth: {
+            initial: '100%',
+            medium: '23.2rem'
+        },
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-            tag: "ol",
+            tag: "ul",
             gap: "5",
             direction: "column",
             alignItems: "stretch",

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

@@ -1 +1 @@
-{"version":3,"file":"SubNav.js","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","initial","variant","Sections","paddingTop","paddingBottom","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}
+{"version":3,"file":"SubNav.js","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width={{ initial: '80dvw', medium: '100%' }}\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({\n  children,\n  ...props\n}: {\n  children: React.ReactNode[];\n  [key: string]: unknown;\n}) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4} maxWidth={{ initial: '100%', medium: '23.2rem' }}>\n      <Flex tag=\"ul\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      <Flex\n        tag=\"ul\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        style={{\n          maxHeight: isOpen ? '1000px' : 0,\n          overflow: 'hidden',\n          transition: isOpen\n            ? 'max-height 1s ease-in-out'\n            : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n        }}\n      >\n        {children.map((child, index) => {\n          return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","initial","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","variant","Sections","paddingTop","paddingBottom","maxWidth","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}

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

@@ -91,7 +91,10 @@ const Link = (props)=>{
                     /*#__PURE__*/ jsx(Typography, {
                         tag: "div",
                         lineHeight: "32px",
-                        width: "100%",
+                        width: {
+                            initial: '80dvw',
+                            medium: '100%'
+                        },
                         overflow: "hidden",
                         style: {
                             textOverflow: 'ellipsis',
@@ -134,8 +137,12 @@ const Sections = ({ children, ...props })=>{
     return /*#__PURE__*/ jsx(Box, {
         paddingTop: 4,
         paddingBottom: 4,
+        maxWidth: {
+            initial: '100%',
+            medium: '23.2rem'
+        },
         children: /*#__PURE__*/ jsx(Flex, {
-            tag: "ol",
+            tag: "ul",
             gap: "5",
             direction: "column",
             alignItems: "stretch",

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

@@ -1 +1 @@
-{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","initial","variant","Sections","paddingTop","paddingBottom","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}
+{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width={{ initial: '80dvw', medium: '100%' }}\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({\n  children,\n  ...props\n}: {\n  children: React.ReactNode[];\n  [key: string]: unknown;\n}) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4} maxWidth={{ initial: '100%', medium: '23.2rem' }}>\n      <Flex tag=\"ul\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      <Flex\n        tag=\"ul\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        style={{\n          maxHeight: isOpen ? '1000px' : 0,\n          overflow: 'hidden',\n          transition: isOpen\n            ? 'max-height 1s ease-in-out'\n            : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n        }}\n      >\n        {children.map((child, index) => {\n          return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","initial","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","variant","Sections","paddingTop","paddingBottom","maxWidth","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}

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

@@ -33,6 +33,14 @@ const Theme = ({ children, themes })=>{
     const [systemTheme, setSystemTheme] = React__namespace.useState();
     const { locale } = reactIntl.useIntl();
     const dispatch = reactRedux.useDispatch();
+    const isIos = [
+        'iPad Simulator',
+        'iPhone Simulator',
+        'iPod Simulator',
+        'iPad',
+        'iPhone',
+        'iPod'
+    ].includes(navigator.platform) || navigator.userAgent.includes('Mac') && 'ontouchend' in document;
     // Listen to changes in the system theme
     React__namespace.useEffect(()=>{
         const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
@@ -62,7 +70,9 @@ const Theme = ({ children, themes })=>{
        */ theme: themes?.[computedThemeName || 'light'],
         children: [
             children,
-            /*#__PURE__*/ jsxRuntime.jsx(GlobalStyle, {})
+            /*#__PURE__*/ jsxRuntime.jsx(GlobalStyle, {
+                $shouldOverrideInputFontSize: isIos
+            })
         ]
     });
 };
@@ -70,6 +80,29 @@ const GlobalStyle = styled.createGlobalStyle`
   body {
     background: ${({ theme })=>theme.colors.neutral100};
   }
+
+  // Temporary fix override to fix iOS zoom due to the 14px input font size
+  ${({ $shouldOverrideInputFontSize })=>$shouldOverrideInputFontSize ? `
+    input[type="color"],
+    input[type="date"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="email"],
+    input[type="month"],
+    input[type="number"],
+    input[type="password"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="text"],
+    input[type="time"],
+    input[type="url"],
+    input[type="week"],
+    select:focus,
+    textarea {
+      font-size: 16px !important;
+      line-height: 2.4rem !important;
+    }
+  ` : undefined}
 `;
 
 exports.Theme = Theme;

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

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { type DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","createGlobalStyle","colors","neutral100"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,sBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,iBAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;;AAGjBL,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvCV,cAAeQ,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBb,cAAea,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELX,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;QACdF,QAASW,CAAAA,0BAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAACzB,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAM0B,iBAAAA,GAAoBzB,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACE0B,eAACC,CAAAA,iCAAAA,EAAAA;QACClB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAAS0B,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5C3B,YAAAA,QAAAA;0BACD8B,cAACC,CAAAA,WAAAA,EAAAA,EAAAA;;;AAGP;AAEA,MAAMA,WAAAA,GAAcC,wBAAiB;;gBAErB,EAAE,CAAC,EAAE1B,KAAK,EAAE,GAAKA,KAAM2B,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;;;;"}
+{"version":3,"file":"Theme.js","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { type DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n  const isIos =\n    ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(\n      navigator.platform\n    ) ||\n    (navigator.userAgent.includes('Mac') && 'ontouchend' in document);\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle $shouldOverrideInputFontSize={isIos} />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle<{ $shouldOverrideInputFontSize: boolean }>`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  // Temporary fix override to fix iOS zoom due to the 14px input font size\n  ${({ $shouldOverrideInputFontSize }) =>\n    $shouldOverrideInputFontSize\n      ? `\n    input[type=\"color\"],\n    input[type=\"date\"],\n    input[type=\"datetime\"],\n    input[type=\"datetime-local\"],\n    input[type=\"email\"],\n    input[type=\"month\"],\n    input[type=\"number\"],\n    input[type=\"password\"],\n    input[type=\"search\"],\n    input[type=\"tel\"],\n    input[type=\"text\"],\n    input[type=\"time\"],\n    input[type=\"url\"],\n    input[type=\"week\"],\n    select:focus,\n    textarea {\n      font-size: 16px !important;\n      line-height: 2.4rem !important;\n    }\n  `\n      : undefined}\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","isIos","includes","navigator","platform","userAgent","document","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","$shouldOverrideInputFontSize","createGlobalStyle","colors","neutral100","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,sBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,iBAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;AACjB,IAAA,MAAMC,KACJ,GAAA;AAAC,QAAA,gBAAA;AAAkB,QAAA,kBAAA;AAAoB,QAAA,gBAAA;AAAkB,QAAA,MAAA;AAAQ,QAAA,QAAA;AAAU,QAAA;KAAO,CAACC,QAAQ,CACzFC,SAAAA,CAAUC,QAAQ,CAAA,IAEnBD,SAAUE,CAAAA,SAAS,CAACH,QAAQ,CAAC,KAAA,CAAA,IAAU,YAAgBI,IAAAA,QAAAA;;AAG1DX,IAAAA,gBAAAA,CAAMY,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvChB,cAAec,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBnB,cAAemB,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELjB,IAAAA,gBAAAA,CAAMY,SAAS,CAAC,IAAA;QACdR,QAASiB,CAAAA,0BAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAAC/B,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAMgC,iBAAAA,GAAoB/B,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACEgC,eAACC,CAAAA,iCAAAA,EAAAA;QACCxB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAASgC,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5CjC,YAAAA,QAAAA;0BACDoC,cAACC,CAAAA,WAAAA,EAAAA;gBAAYC,4BAA8BvB,EAAAA;;;;AAGjD;AAEA,MAAMsB,WAAAA,GAAcE,wBAA4D;;gBAEhE,EAAE,CAAC,EAAEjC,KAAK,EAAE,GAAKA,KAAMkC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;AAIvD,EAAA,EAAE,CAAC,EAAEH,4BAA4B,EAAE,GACjCA,+BACI;;;;;;;;;;;;;;;;;;;;AAoBN,EAAA,CAAC,GACKI,SAAU;AAClB,CAAC;;;;"}

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

@@ -12,6 +12,14 @@ const Theme = ({ children, themes })=>{
     const [systemTheme, setSystemTheme] = React.useState();
     const { locale } = useIntl();
     const dispatch = useDispatch();
+    const isIos = [
+        'iPad Simulator',
+        'iPhone Simulator',
+        'iPod Simulator',
+        'iPad',
+        'iPhone',
+        'iPod'
+    ].includes(navigator.platform) || navigator.userAgent.includes('Mac') && 'ontouchend' in document;
     // Listen to changes in the system theme
     React.useEffect(()=>{
         const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
@@ -41,7 +49,9 @@ const Theme = ({ children, themes })=>{
        */ theme: themes?.[computedThemeName || 'light'],
         children: [
             children,
-            /*#__PURE__*/ jsx(GlobalStyle, {})
+            /*#__PURE__*/ jsx(GlobalStyle, {
+                $shouldOverrideInputFontSize: isIos
+            })
         ]
     });
 };
@@ -49,6 +59,29 @@ const GlobalStyle = createGlobalStyle`
   body {
     background: ${({ theme })=>theme.colors.neutral100};
   }
+
+  // Temporary fix override to fix iOS zoom due to the 14px input font size
+  ${({ $shouldOverrideInputFontSize })=>$shouldOverrideInputFontSize ? `
+    input[type="color"],
+    input[type="date"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="email"],
+    input[type="month"],
+    input[type="number"],
+    input[type="password"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="text"],
+    input[type="time"],
+    input[type="url"],
+    input[type="week"],
+    select:focus,
+    textarea {
+      font-size: 16px !important;
+      line-height: 2.4rem !important;
+    }
+  ` : undefined}
 `;
 
 export { Theme };

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

@@ -1 +1 @@
-{"version":3,"file":"Theme.mjs","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { type DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","createGlobalStyle","colors","neutral100"],"mappings":";;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,gBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,MAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,OAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;;AAGjBL,IAAAA,KAAAA,CAAMM,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvCV,cAAeQ,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBb,cAAea,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELX,IAAAA,KAAAA,CAAMM,SAAS,CAAC,IAAA;QACdF,QAASW,CAAAA,kBAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAACzB,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAM0B,iBAAAA,GAAoBzB,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACE0B,IAACC,CAAAA,oBAAAA,EAAAA;QACClB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAAS0B,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5C3B,YAAAA,QAAAA;0BACD8B,GAACC,CAAAA,WAAAA,EAAAA,EAAAA;;;AAGP;AAEA,MAAMA,WAAAA,GAAcC,iBAAiB;;gBAErB,EAAE,CAAC,EAAE1B,KAAK,EAAE,GAAKA,KAAM2B,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;;;;"}
+{"version":3,"file":"Theme.mjs","sources":["../../../../../admin/src/components/Theme.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DesignSystemProvider } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { type DefaultTheme, createGlobalStyle } from 'styled-components';\n\nimport { useTypedSelector } from '../core/store/hooks';\nimport { setAvailableThemes } from '../reducer';\n\ninterface ThemeProps {\n  children: React.ReactNode;\n  themes: {\n    dark: DefaultTheme;\n    light: DefaultTheme;\n  };\n}\n\nconst Theme = ({ children, themes }: ThemeProps) => {\n  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);\n  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>();\n  const { locale } = useIntl();\n  const dispatch = useDispatch();\n  const isIos =\n    ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(\n      navigator.platform\n    ) ||\n    (navigator.userAgent.includes('Mac') && 'ontouchend' in document);\n\n  // Listen to changes in the system theme\n  React.useEffect(() => {\n    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');\n\n    const listener = (event: MediaQueryListEvent) => {\n      setSystemTheme(event.matches ? 'dark' : 'light');\n    };\n    themeWatcher.addEventListener('change', listener);\n\n    // Remove listener on cleanup\n    return () => {\n      themeWatcher.removeEventListener('change', listener);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    dispatch(setAvailableThemes(Object.keys(themes)));\n  }, [dispatch, themes]);\n\n  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;\n\n  return (\n    <DesignSystemProvider\n      locale={locale}\n      /**\n       * TODO: could we make this neater i.e. by setting up the context to throw\n       * if it can't find it, that way the type is always fully defined and we're\n       * not checking it all the time...\n       */\n      theme={themes?.[computedThemeName || 'light']}\n    >\n      {children}\n      <GlobalStyle $shouldOverrideInputFontSize={isIos} />\n    </DesignSystemProvider>\n  );\n};\n\nconst GlobalStyle = createGlobalStyle<{ $shouldOverrideInputFontSize: boolean }>`\n  body {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  // Temporary fix override to fix iOS zoom due to the 14px input font size\n  ${({ $shouldOverrideInputFontSize }) =>\n    $shouldOverrideInputFontSize\n      ? `\n    input[type=\"color\"],\n    input[type=\"date\"],\n    input[type=\"datetime\"],\n    input[type=\"datetime-local\"],\n    input[type=\"email\"],\n    input[type=\"month\"],\n    input[type=\"number\"],\n    input[type=\"password\"],\n    input[type=\"search\"],\n    input[type=\"tel\"],\n    input[type=\"text\"],\n    input[type=\"time\"],\n    input[type=\"url\"],\n    input[type=\"week\"],\n    select:focus,\n    textarea {\n      font-size: 16px !important;\n      line-height: 2.4rem !important;\n    }\n  `\n      : undefined}\n`;\n\nexport { Theme };\nexport type { ThemeProps };\n"],"names":["Theme","children","themes","currentTheme","useTypedSelector","state","admin_app","theme","systemTheme","setSystemTheme","React","useState","locale","useIntl","dispatch","useDispatch","isIos","includes","navigator","platform","userAgent","document","useEffect","themeWatcher","window","matchMedia","matches","listener","event","addEventListener","removeEventListener","setAvailableThemes","Object","keys","computedThemeName","_jsxs","DesignSystemProvider","_jsx","GlobalStyle","$shouldOverrideInputFontSize","createGlobalStyle","colors","neutral100","undefined"],"mappings":";;;;;;;;;AAkBA,MAAMA,QAAQ,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAc,GAAA;IAC7C,MAAM,EAAEC,YAAY,EAAE,GAAGC,gBAAAA,CAAiB,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,CAACC,KAAK,CAAA;AAC1E,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,MAAMC,QAAQ,EAAA;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,OAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;AACjB,IAAA,MAAMC,KACJ,GAAA;AAAC,QAAA,gBAAA;AAAkB,QAAA,kBAAA;AAAoB,QAAA,gBAAA;AAAkB,QAAA,MAAA;AAAQ,QAAA,QAAA;AAAU,QAAA;KAAO,CAACC,QAAQ,CACzFC,SAAAA,CAAUC,QAAQ,CAAA,IAEnBD,SAAUE,CAAAA,SAAS,CAACH,QAAQ,CAAC,KAAA,CAAA,IAAU,YAAgBI,IAAAA,QAAAA;;AAG1DX,IAAAA,KAAAA,CAAMY,SAAS,CAAC,IAAA;QACd,MAAMC,YAAAA,GAAeC,MAAOC,CAAAA,UAAU,CAAC,8BAAA,CAAA;QACvChB,cAAec,CAAAA,YAAAA,CAAaG,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAE/C,QAAA,MAAMC,WAAW,CAACC,KAAAA,GAAAA;YAChBnB,cAAemB,CAAAA,KAAAA,CAAMF,OAAO,GAAG,MAAS,GAAA,OAAA,CAAA;AAC1C,SAAA;QACAH,YAAaM,CAAAA,gBAAgB,CAAC,QAAUF,EAAAA,QAAAA,CAAAA;;QAGxC,OAAO,IAAA;YACLJ,YAAaO,CAAAA,mBAAmB,CAAC,QAAUH,EAAAA,QAAAA,CAAAA;AAC7C,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;AAELjB,IAAAA,KAAAA,CAAMY,SAAS,CAAC,IAAA;QACdR,QAASiB,CAAAA,kBAAAA,CAAmBC,MAAOC,CAAAA,IAAI,CAAC/B,MAAAA,CAAAA,CAAAA,CAAAA;KACvC,EAAA;AAACY,QAAAA,QAAAA;AAAUZ,QAAAA;AAAO,KAAA,CAAA;IAErB,MAAMgC,iBAAAA,GAAoB/B,YAAiB,KAAA,QAAA,GAAWK,WAAcL,GAAAA,YAAAA;AAEpE,IAAA,qBACEgC,IAACC,CAAAA,oBAAAA,EAAAA;QACCxB,MAAQA,EAAAA,MAAAA;AACR;;;;AAIC,UACDL,KAAOL,EAAAA,MAAAA,GAASgC,iBAAAA,IAAqB,OAAQ,CAAA;;AAE5CjC,YAAAA,QAAAA;0BACDoC,GAACC,CAAAA,WAAAA,EAAAA;gBAAYC,4BAA8BvB,EAAAA;;;;AAGjD;AAEA,MAAMsB,WAAAA,GAAcE,iBAA4D;;gBAEhE,EAAE,CAAC,EAAEjC,KAAK,EAAE,GAAKA,KAAMkC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;AAIvD,EAAA,EAAE,CAAC,EAAEH,4BAA4B,EAAE,GACjCA,+BACI;;;;;;;;;;;;;;;;;;;;AAoBN,EAAA,CAAC,GACKI,SAAU;AAClB,CAAC;;;;"}

package/dist/admin/admin/src/pages/Auth/components/Login.js

@@ -138,7 +138,7 @@ const Login = ({ children })=>{
                                                 defaultMessage: 'kai@doe.com'
                                             }),
                                             required: true,
-                                            type: 'string'
+                                            type: 'email'
                                         },
                                         {
                                             label: formatMessage({