@strapi/content-manager 0.0.0-experimental.c592deb623aed3f74ef7fdacfad9757ed59d34f7 → 0.0.0-experimental.cb2eb3230e1cd78417158a7e44cee77f6eb94c32

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.mjs

@@ -0,0 +1,85 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useField } from '@strapi/admin/strapi-admin';
+import { Field, Flex, IconButton } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { transformDocument } from '../../../utils/data.mjs';
+import { createDefaultForm } from '../../../utils/forms.mjs';
+import { Initializer } from './Initializer.mjs';
+import { NonRepeatableComponent } from './NonRepeatable.mjs';
+import { RepeatableComponent } from './Repeatable.mjs';
+
+const ComponentInput = ({ label, required, name, attribute, disabled, labelAction, ...props })=>{
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const showResetComponent = !attribute.repeatable && field.value && !disabled;
+    const components = useDocumentContext('ComponentInput', (state)=>state.document.components);
+    const handleInitialisationClick = ()=>{
+        const schema = components[attribute.component];
+        const form = createDefaultForm(schema, components);
+        const data = transformDocument(schema, components)(form);
+        field.onChange(name, data);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: field.error,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ jsxs(Field.Label, {
+                        action: labelAction,
+                        children: [
+                            label,
+                            attribute.repeatable && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    " (",
+                                    Array.isArray(field.value) ? field.value.length : 0,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    }),
+                    showResetComponent && /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTranslation('components.reset-entry'),
+                            defaultMessage: 'Reset Entry'
+                        }),
+                        variant: "ghost",
+                        onClick: ()=>{
+                            field.onChange(name, null);
+                        },
+                        children: /*#__PURE__*/ jsx(Trash, {})
+                    })
+                ]
+            }),
+            !attribute.repeatable && !field.value && /*#__PURE__*/ jsx(Initializer, {
+                disabled: disabled,
+                name: name,
+                onClick: handleInitialisationClick
+            }),
+            !attribute.repeatable && field.value ? /*#__PURE__*/ jsx(NonRepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }) : null,
+            attribute.repeatable && /*#__PURE__*/ jsx(RepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+const MemoizedComponentInput = /*#__PURE__*/ React.memo(ComponentInput);
+
+export { MemoizedComponentInput as ComponentInput };
+//# sourceMappingURL=Input.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Component/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\nimport { Field, Flex, IconButton } from '@strapi/design-system';\nimport { Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { type InputRendererProps } from '../../InputRenderer';\n\nimport { Initializer } from './Initializer';\nimport { NonRepeatableComponent } from './NonRepeatable';\nimport { RepeatableComponent } from './Repeatable';\n\ninterface ComponentInputProps\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {\n  labelAction?: React.ReactNode;\n  children: (props: InputRendererProps) => React.ReactNode;\n  /**\n   * We need layout to come from the props, and not via a hook, because Content History needs\n   * a way to modify the normal component layout to add hidden fields.\n   */\n  layout: EditFieldLayout[][];\n}\n\nconst ComponentInput = ({\n  label,\n  required,\n  name,\n  attribute,\n  disabled,\n  labelAction,\n  ...props\n}: ComponentInputProps) => {\n  const { formatMessage } = useIntl();\n  const field = useField(name);\n\n  const showResetComponent = !attribute.repeatable && field.value && !disabled;\n\n  const components = useDocumentContext('ComponentInput', (state) => state.document.components);\n\n  const handleInitialisationClick = () => {\n    const schema = components[attribute.component];\n    const form = createDefaultForm(schema, components);\n    const data = transformDocument(schema, components)(form);\n\n    field.onChange(name, data);\n  };\n\n  return (\n    <Field.Root error={field.error} required={required}>\n      <Flex justifyContent=\"space-between\">\n        <Field.Label action={labelAction}>\n          {label}\n          {attribute.repeatable && (\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\n          )}\n        </Field.Label>\n\n        {showResetComponent && (\n          <IconButton\n            label={formatMessage({\n              id: getTranslation('components.reset-entry'),\n              defaultMessage: 'Reset Entry',\n            })}\n            variant=\"ghost\"\n            onClick={() => {\n              field.onChange(name, null);\n            }}\n          >\n            <Trash />\n          </IconButton>\n        )}\n      </Flex>\n      {/**\n       * if the field isn't repeatable then we display a button to start the field\n       * TODO: should this just live in the `NonRepeatableComponent`?\n       */}\n      {!attribute.repeatable && !field.value && (\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\n      )}\n      {!attribute.repeatable && field.value ? (\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </NonRepeatableComponent>\n      ) : null}\n      {attribute.repeatable && (\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\n          {props.children}\n        </RepeatableComponent>\n      )}\n      <Field.Error />\n    </Field.Root>\n  );\n};\n\nconst MemoizedComponentInput = React.memo(ComponentInput);\n\nexport { MemoizedComponentInput as ComponentInput };\nexport type { ComponentInputProps };\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","components","useDocumentContext","state","document","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var DocumentContext = require('../../../../../features/DocumentContext.js');
+var FormLayout = require('../../FormLayout.js');
+var ComponentContext = require('../ComponentContext.js');
+
+const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { value } = strapiAdmin.useField(name);
+    const level = ComponentContext.useComponent('NonRepeatableComponent', (state)=>state.level);
+    const isNested = level > 0;
+    const currentDocument = DocumentContext.useDocumentContext('NonRepeatableComponent', (state)=>state.document);
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentContext.ComponentProvider, {
+        id: value?.id,
+        uid: attribute.component,
+        level: level + 1,
+        type: "component",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            background: 'neutral100',
+            paddingLeft: 6,
+            paddingRight: 6,
+            paddingTop: 6,
+            paddingBottom: 6,
+            hasRadius: isNested,
+            borderColor: isNested ? 'neutral200' : undefined,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 6,
+                children: layout.map((row, index)=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridRoot, {
+                        gap: 4,
+                        children: row.map(({ size, ...field })=>{
+                            /**
+                   * Layouts are built from schemas so they don't understand the complete
+                   * schema tree, for components we append the parent name to the field name
+                   * because this is the structure for the data & permissions also understand
+                   * the nesting involved.
+                   */ const completeFieldName = `${name}.${field.name}`;
+                            const translatedLabel = formatMessage({
+                                id: `content-manager.components.${attribute.component}.${field.name}`,
+                                defaultMessage: field.label
+                            });
+                            return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridItem, {
+                                col: size,
+                                s: 12,
+                                xs: 12,
+                                direction: "column",
+                                alignItems: "stretch",
+                                children: children({
+                                    ...field,
+                                    label: translatedLabel,
+                                    name: completeFieldName,
+                                    document: currentDocument
+                                })
+                            }, completeFieldName);
+                        })
+                    }, index);
+                })
+            })
+        })
+    });
+};
+
+exports.NonRepeatableComponent = NonRepeatableComponent;
+//# sourceMappingURL=NonRepeatable.js.map

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const currentDocument = useDocumentContext('NonRepeatableComponent', (state) => state.document);\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        paddingLeft={6}\n        paddingRight={6}\n        paddingTop={6}\n        paddingBottom={6}\n        hasRadius={isNested}\n        borderColor={isNested ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            return (\n              <ResponsiveGridRoot gap={4} key={index}>\n                {row.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","document","_jsx","ComponentProvider","id","uid","component","type","Box","background","paddingLeft","paddingRight","paddingTop","paddingBottom","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs"],"mappings":";;;;;;;;;;AAYMA,MAAAA,sBAAAA,GAAyB,CAAC,EAC9BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACsB,GAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAASN,CAAAA,IAAAA,CAAAA;AAC3B,IAAA,MAAMO,QAAQC,6BAAa,CAAA,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,MAAMF,KAAK,CAAA;AAC3E,IAAA,MAAMG,WAAWH,KAAQ,GAAA,CAAA;AACzB,IAAA,MAAMI,kBAAkBC,kCAAmB,CAAA,wBAAA,EAA0B,CAACH,KAAAA,GAAUA,MAAMI,QAAQ,CAAA;AAE9F,IAAA,qBACEC,cAACC,CAAAA,kCAAAA,EAAAA;AAAkBC,QAAAA,EAAAA,EAAIX,KAAOW,EAAAA,EAAAA;AAAIC,QAAAA,GAAAA,EAAKlB,UAAUmB,SAAS;AAAEX,QAAAA,KAAAA,EAAOA,KAAQ,GAAA,CAAA;QAAGY,IAAK,EAAA,WAAA;AACjF,QAAA,QAAA,gBAAAL,cAACM,CAAAA,gBAAAA,EAAAA;YACCC,UAAY,EAAA,YAAA;YACZC,WAAa,EAAA,CAAA;YACbC,YAAc,EAAA,CAAA;YACdC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,SAAWhB,EAAAA,QAAAA;AACXiB,YAAAA,WAAAA,EAAajB,WAAW,YAAekB,GAAAA,SAAAA;AAEvC,YAAA,QAAA,gBAAAd,cAACe,CAAAA,iBAAAA,EAAAA;gBAAKC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;gBAAUC,GAAK,EAAA,CAAA;0BAChD9B,MAAO+B,CAAAA,GAAG,CAAC,CAACC,GAAKC,EAAAA,KAAAA,GAAAA;AAChB,oBAAA,qBACErB,cAACsB,CAAAA,6BAAAA,EAAAA;wBAAmBJ,GAAK,EAAA,CAAA;AACtBE,wBAAAA,QAAAA,EAAAA,GAAAA,CAAID,GAAG,CAAC,CAAC,EAAEI,IAAI,EAAE,GAAGC,KAAO,EAAA,GAAA;AAC1B;;;;;sBAMA,MAAMC,iBAAoB,GAAA,CAAC,EAAEvC,IAAAA,CAAK,CAAC,EAAEsC,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AAEjD,4BAAA,MAAMwC,kBAAkBrC,aAAc,CAAA;gCACpCa,EAAI,EAAA,CAAC,2BAA2B,EAAEjB,SAAUmB,CAAAA,SAAS,CAAC,CAAC,EAAEoB,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AACrEyC,gCAAAA,cAAAA,EAAgBH,MAAMI;AACxB,6BAAA,CAAA;AAEA,4BAAA,qBACE5B,cAAC6B,CAAAA,6BAAAA,EAAAA;gCACCC,GAAKP,EAAAA,IAAAA;gCAELQ,CAAG,EAAA,EAAA;gCACHC,EAAI,EAAA,EAAA;gCACJhB,SAAU,EAAA,QAAA;gCACVC,UAAW,EAAA,SAAA;0CAEV9B,QAAS,CAAA;AACR,oCAAA,GAAGqC,KAAK;oCACRI,KAAOF,EAAAA,eAAAA;oCACPxC,IAAMuC,EAAAA,iBAAAA;oCACN1B,QAAUF,EAAAA;AACZ,iCAAA;AAXK4B,6BAAAA,EAAAA,iBAAAA,CAAAA;AAcX,yBAAA;AAhC+BJ,qBAAAA,EAAAA,KAAAA,CAAAA;AAmCrC,iBAAA;;;;AAKV;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from '@strapi/admin/strapi-admin';
+import { Box, Flex } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
+import { ResponsiveGridRoot, ResponsiveGridItem } from '../../FormLayout.mjs';
+import { useComponent, ComponentProvider } from '../ComponentContext.mjs';
+
+const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
+    const { formatMessage } = useIntl();
+    const { value } = useField(name);
+    const level = useComponent('NonRepeatableComponent', (state)=>state.level);
+    const isNested = level > 0;
+    const currentDocument = useDocumentContext('NonRepeatableComponent', (state)=>state.document);
+    return /*#__PURE__*/ jsx(ComponentProvider, {
+        id: value?.id,
+        uid: attribute.component,
+        level: level + 1,
+        type: "component",
+        children: /*#__PURE__*/ jsx(Box, {
+            background: 'neutral100',
+            paddingLeft: 6,
+            paddingRight: 6,
+            paddingTop: 6,
+            paddingBottom: 6,
+            hasRadius: isNested,
+            borderColor: isNested ? 'neutral200' : undefined,
+            children: /*#__PURE__*/ jsx(Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 6,
+                children: layout.map((row, index)=>{
+                    return /*#__PURE__*/ jsx(ResponsiveGridRoot, {
+                        gap: 4,
+                        children: row.map(({ size, ...field })=>{
+                            /**
+                   * Layouts are built from schemas so they don't understand the complete
+                   * schema tree, for components we append the parent name to the field name
+                   * because this is the structure for the data & permissions also understand
+                   * the nesting involved.
+                   */ const completeFieldName = `${name}.${field.name}`;
+                            const translatedLabel = formatMessage({
+                                id: `content-manager.components.${attribute.component}.${field.name}`,
+                                defaultMessage: field.label
+                            });
+                            return /*#__PURE__*/ jsx(ResponsiveGridItem, {
+                                col: size,
+                                s: 12,
+                                xs: 12,
+                                direction: "column",
+                                alignItems: "stretch",
+                                children: children({
+                                    ...field,
+                                    label: translatedLabel,
+                                    name: completeFieldName,
+                                    document: currentDocument
+                                })
+                            }, completeFieldName);
+                        })
+                    }, index);
+                })
+            })
+        })
+    });
+};
+
+export { NonRepeatableComponent };
+//# sourceMappingURL=NonRepeatable.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonRepeatable.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const currentDocument = useDocumentContext('NonRepeatableComponent', (state) => state.document);\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        paddingLeft={6}\n        paddingRight={6}\n        paddingTop={6}\n        paddingBottom={6}\n        hasRadius={isNested}\n        borderColor={isNested ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            return (\n              <ResponsiveGridRoot gap={4} key={index}>\n                {row.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","document","_jsx","ComponentProvider","id","uid","component","type","Box","background","paddingLeft","paddingRight","paddingTop","paddingBottom","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs"],"mappings":";;;;;;;;AAYMA,MAAAA,sBAAAA,GAAyB,CAAC,EAC9BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACsB,GAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,QAASN,CAAAA,IAAAA,CAAAA;AAC3B,IAAA,MAAMO,QAAQC,YAAa,CAAA,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,MAAMF,KAAK,CAAA;AAC3E,IAAA,MAAMG,WAAWH,KAAQ,GAAA,CAAA;AACzB,IAAA,MAAMI,kBAAkBC,kBAAmB,CAAA,wBAAA,EAA0B,CAACH,KAAAA,GAAUA,MAAMI,QAAQ,CAAA;AAE9F,IAAA,qBACEC,GAACC,CAAAA,iBAAAA,EAAAA;AAAkBC,QAAAA,EAAAA,EAAIX,KAAOW,EAAAA,EAAAA;AAAIC,QAAAA,GAAAA,EAAKlB,UAAUmB,SAAS;AAAEX,QAAAA,KAAAA,EAAOA,KAAQ,GAAA,CAAA;QAAGY,IAAK,EAAA,WAAA;AACjF,QAAA,QAAA,gBAAAL,GAACM,CAAAA,GAAAA,EAAAA;YACCC,UAAY,EAAA,YAAA;YACZC,WAAa,EAAA,CAAA;YACbC,YAAc,EAAA,CAAA;YACdC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,SAAWhB,EAAAA,QAAAA;AACXiB,YAAAA,WAAAA,EAAajB,WAAW,YAAekB,GAAAA,SAAAA;AAEvC,YAAA,QAAA,gBAAAd,GAACe,CAAAA,IAAAA,EAAAA;gBAAKC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;gBAAUC,GAAK,EAAA,CAAA;0BAChD9B,MAAO+B,CAAAA,GAAG,CAAC,CAACC,GAAKC,EAAAA,KAAAA,GAAAA;AAChB,oBAAA,qBACErB,GAACsB,CAAAA,kBAAAA,EAAAA;wBAAmBJ,GAAK,EAAA,CAAA;AACtBE,wBAAAA,QAAAA,EAAAA,GAAAA,CAAID,GAAG,CAAC,CAAC,EAAEI,IAAI,EAAE,GAAGC,KAAO,EAAA,GAAA;AAC1B;;;;;sBAMA,MAAMC,iBAAoB,GAAA,CAAC,EAAEvC,IAAAA,CAAK,CAAC,EAAEsC,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AAEjD,4BAAA,MAAMwC,kBAAkBrC,aAAc,CAAA;gCACpCa,EAAI,EAAA,CAAC,2BAA2B,EAAEjB,SAAUmB,CAAAA,SAAS,CAAC,CAAC,EAAEoB,KAAAA,CAAMtC,IAAI,CAAC,CAAC;AACrEyC,gCAAAA,cAAAA,EAAgBH,MAAMI;AACxB,6BAAA,CAAA;AAEA,4BAAA,qBACE5B,GAAC6B,CAAAA,kBAAAA,EAAAA;gCACCC,GAAKP,EAAAA,IAAAA;gCAELQ,CAAG,EAAA,EAAA;gCACHC,EAAI,EAAA,EAAA;gCACJhB,SAAU,EAAA,QAAA;gCACVC,UAAW,EAAA,SAAA;0CAEV9B,QAAS,CAAA;AACR,oCAAA,GAAGqC,KAAK;oCACRI,KAAOF,EAAAA,eAAAA;oCACPxC,IAAMuC,EAAAA,iBAAAA;oCACN1B,QAAUF,EAAAA;AACZ,iCAAA;AAXK4B,6BAAAA,EAAAA,iBAAAA,CAAAA;AAcX,yBAAA;AAhC+BJ,qBAAAA,EAAAA,KAAAA,CAAAA;AAmCrC,iBAAA;;;;AAKV;;;;"}