@strapi/content-manager 0.0.0-experimental.c222e1c4de12dd05c26938a605a1128fb3481d1d → 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c

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

@@ -0,0 +1,391 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useNotification, useField, useForm } from '@strapi/admin/strapi-admin';
+import { Accordion, TextButton, Box, VisuallyHidden, useComposedRefs, IconButton, Flex } from '@strapi/design-system';
+import { Plus, Trash, Drag } from '@strapi/icons';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { useLocation } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
+import { useDoc } from '../../../../../hooks/useDocument.mjs';
+import { useDragAndDrop } from '../../../../../hooks/useDragAndDrop.mjs';
+import { usePrev } from '../../../../../hooks/usePrev.mjs';
+import { getIn } from '../../../../../utils/objects.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { transformDocument } from '../../../utils/data.mjs';
+import { createDefaultForm } from '../../../utils/forms.mjs';
+import { ResponsiveGridRoot, ResponsiveGridItem } from '../../FormLayout.mjs';
+import { useComponent, ComponentProvider } from '../ComponentContext.mjs';
+import { Initializer } from './Initializer.mjs';
+
+const RepeatableComponent = ({ attribute, disabled, name, mainField, children, layout })=>{
+    const { toggleNotification } = useNotification();
+    const { formatMessage } = useIntl();
+    const { search: searchString } = useLocation();
+    const search = React.useMemo(()=>new URLSearchParams(searchString), [
+        searchString
+    ]);
+    const { components } = useDoc();
+    const { value = [], error, rawError } = useField(name);
+    const addFieldRow = useForm('RepeatableComponent', (state)=>state.addFieldRow);
+    const moveFieldRow = useForm('RepeatableComponent', (state)=>state.moveFieldRow);
+    const removeFieldRow = useForm('RepeatableComponent', (state)=>state.removeFieldRow);
+    const { max = Infinity } = attribute;
+    const [collapseToOpen, setCollapseToOpen] = React.useState('');
+    const [liveText, setLiveText] = React.useState('');
+    React.useEffect(()=>{
+        const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
+        const hasNestedValue = value && Array.isArray(value) && value.length > 0;
+        if (hasNestedErrors && hasNestedValue) {
+            const errorOpenItems = rawError.map((_, idx)=>{
+                return value[idx] ? value[idx].__temp_key__ : null;
+            }).filter((value)=>!!value);
+            if (errorOpenItems && errorOpenItems.length > 0) {
+                setCollapseToOpen((collapseToOpen)=>{
+                    if (!errorOpenItems.includes(collapseToOpen)) {
+                        return errorOpenItems[0];
+                    }
+                    return collapseToOpen;
+                });
+            }
+        }
+    }, [
+        rawError,
+        value
+    ]);
+    /**
+   * Get the temp key of the component that has the field that is currently focussed
+   * as defined by the `field` query param. We can then force this specific component
+   * to be in its "open" state.
+   */ const componentTmpKeyWithFocussedField = React.useMemo(()=>{
+        if (search.has('field')) {
+            const fieldParam = search.get('field');
+            if (!fieldParam) {
+                return undefined;
+            }
+            const [, path] = fieldParam.split(`${name}.`);
+            if (getIn(value, path, undefined) !== undefined) {
+                const [subpath] = path.split('.');
+                return getIn(value, subpath, undefined)?.__temp_key__;
+            }
+        }
+        return undefined;
+    }, [
+        search,
+        name,
+        value
+    ]);
+    const prevValue = usePrev(value);
+    React.useEffect(()=>{
+        /**
+     * When we add a new item to the array, we want to open the collapse.
+     */ if (prevValue && prevValue.length < value.length) {
+            setCollapseToOpen(value[value.length - 1].__temp_key__);
+        }
+    }, [
+        value,
+        prevValue
+    ]);
+    React.useEffect(()=>{
+        if (typeof componentTmpKeyWithFocussedField === 'string') {
+            setCollapseToOpen(componentTmpKeyWithFocussedField);
+        }
+    }, [
+        componentTmpKeyWithFocussedField
+    ]);
+    const toggleCollapses = ()=>{
+        setCollapseToOpen('');
+    };
+    const handleClick = ()=>{
+        if (value.length < max) {
+            const schema = components[attribute.component];
+            const form = createDefaultForm(schema, components);
+            const data = transformDocument(schema, components)(form);
+            addFieldRow(name, data);
+        // setCollapseToOpen(nextTempKey);
+        } else if (value.length >= max) {
+            toggleNotification({
+                type: 'info',
+                message: formatMessage({
+                    id: getTranslation('components.notification.info.maximum-requirement')
+                })
+            });
+        }
+    };
+    const handleMoveComponentField = (newIndex, currentIndex)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in list: {position}.'
+        }, {
+            item: `${name}.${currentIndex}`,
+            position: getItemPos(newIndex)
+        }));
+        moveFieldRow(name, currentIndex, newIndex);
+    };
+    const handleValueChange = (key)=>{
+        setCollapseToOpen(key);
+    };
+    const getItemPos = (index)=>`${index + 1} of ${value.length}`;
+    const handleCancel = (index)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.cancel-item'),
+            defaultMessage: '{item}, dropped. Re-order cancelled.'
+        }, {
+            item: `${name}.${index}`
+        }));
+    };
+    const handleGrabItem = (index)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.grab-item'),
+            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        }, {
+            item: `${name}.${index}`,
+            position: getItemPos(index)
+        }));
+    };
+    const handleDropItem = (index)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.drop-item'),
+            defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        }, {
+            item: `${name}.${index}`,
+            position: getItemPos(index)
+        }));
+    };
+    const ariaDescriptionId = React.useId();
+    const level = useComponent('RepeatableComponent', (state)=>state.level);
+    if (value.length === 0) {
+        return /*#__PURE__*/ jsx(Initializer, {
+            disabled: disabled,
+            name: name,
+            onClick: handleClick
+        });
+    }
+    return /*#__PURE__*/ jsxs(Box, {
+        hasRadius: true,
+        children: [
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                id: ariaDescriptionId,
+                children: formatMessage({
+                    id: getTranslation('dnd.instructions'),
+                    defaultMessage: `Press spacebar to grab and re-order`
+                })
+            }),
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                "aria-live": "assertive",
+                children: liveText
+            }),
+            /*#__PURE__*/ jsxs(AccordionRoot, {
+                $error: error,
+                value: collapseToOpen,
+                onValueChange: handleValueChange,
+                "aria-describedby": ariaDescriptionId,
+                children: [
+                    value.map(({ __temp_key__: key, id }, index)=>{
+                        const nameWithIndex = `${name}.${index}`;
+                        return /*#__PURE__*/ jsx(ComponentProvider, {
+                            // id is always a number in a component
+                            id: id,
+                            uid: attribute.component,
+                            level: level + 1,
+                            type: "repeatable",
+                            children: /*#__PURE__*/ jsx(Component, {
+                                disabled: disabled,
+                                name: nameWithIndex,
+                                attribute: attribute,
+                                index: index,
+                                mainField: mainField,
+                                onMoveItem: handleMoveComponentField,
+                                onDeleteComponent: ()=>{
+                                    removeFieldRow(name, index);
+                                    toggleCollapses();
+                                },
+                                toggleCollapses: toggleCollapses,
+                                onCancel: handleCancel,
+                                onDropItem: handleDropItem,
+                                onGrabItem: handleGrabItem,
+                                __temp_key__: key,
+                                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 = `${nameWithIndex}.${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
+                                                })
+                                            }, completeFieldName);
+                                        })
+                                    }, index);
+                                })
+                            })
+                        }, key);
+                    }),
+                    /*#__PURE__*/ jsx(TextButtonCustom, {
+                        disabled: disabled,
+                        onClick: handleClick,
+                        startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                        children: formatMessage({
+                            id: getTranslation('containers.EditView.add.new-entry'),
+                            defaultMessage: 'Add an entry'
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const AccordionRoot = styled(Accordion.Root)`
+  border: 1px solid
+    ${({ theme, $error })=>$error ? theme.colors.danger600 : theme.colors.neutral200};
+`;
+const TextButtonCustom = styled(TextButton)`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid ${({ theme })=>theme.colors.neutral200};
+  padding-inline: ${(props)=>props.theme.spaces[6]};
+  padding-block: ${(props)=>props.theme.spaces[3]};
+
+  &:not([disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${(props)=>props.theme.colors.primary100};
+    }
+  }
+
+  span {
+    font-weight: 600;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+`;
+const Component = ({ disabled, index, name, mainField = {
+    name: 'id',
+    type: 'integer'
+}, children, onDeleteComponent, toggleCollapses, __temp_key__, ...dragProps })=>{
+    const { formatMessage } = useIntl();
+    const displayValue = useForm('RepeatableComponent', (state)=>{
+        return getIn(state.values, [
+            ...name.split('.'),
+            mainField.name
+        ]);
+    });
+    const accordionRef = React.useRef(null);
+    /**
+   * The last item in the fieldName array will be the index of this component.
+   * Drag and drop should be isolated to the parent component so nested repeatable
+   * components are not affected by the drag and drop of the parent component in
+   * their own re-ordering context.
+   */ const componentKey = name.split('.').slice(0, -1).join('.');
+    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
+        type: `${ItemTypes.COMPONENT}_${componentKey}`,
+        index,
+        item: {
+            index,
+            displayedValue: displayValue
+        },
+        onStart () {
+            // Close all collapses
+            toggleCollapses();
+        },
+        ...dragProps
+    });
+    React.useEffect(()=>{
+        dragPreviewRef(getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef,
+        index
+    ]);
+    const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
+    const composedBoxRefs = useComposedRefs(boxRef, dropRef);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: isDragging ? /*#__PURE__*/ jsx(Preview, {}) : /*#__PURE__*/ jsxs(Accordion.Item, {
+            ref: composedBoxRefs,
+            value: __temp_key__,
+            children: [
+                /*#__PURE__*/ jsxs(Accordion.Header, {
+                    children: [
+                        /*#__PURE__*/ jsx(Accordion.Trigger, {
+                            children: displayValue
+                        }),
+                        /*#__PURE__*/ jsxs(Accordion.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    variant: "ghost",
+                                    onClick: onDeleteComponent,
+                                    label: formatMessage({
+                                        id: getTranslation('containers.Edit.delete'),
+                                        defaultMessage: 'Delete'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(Trash, {})
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    ref: composedAccordionRefs,
+                                    variant: "ghost",
+                                    onClick: (e)=>e.stopPropagation(),
+                                    "data-handler-id": handlerId,
+                                    label: formatMessage({
+                                        id: getTranslation('components.DragHandle-label'),
+                                        defaultMessage: 'Drag'
+                                    }),
+                                    onKeyDown: handleKeyDown,
+                                    children: /*#__PURE__*/ jsx(Drag, {})
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Accordion.Content, {
+                    children: /*#__PURE__*/ jsx(Flex, {
+                        direction: "column",
+                        alignItems: "stretch",
+                        background: "neutral100",
+                        padding: 6,
+                        gap: 6,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+};
+const Preview = ()=>{
+    return /*#__PURE__*/ jsx(StyledSpan, {
+        tag: "span",
+        padding: 6,
+        background: "primary100"
+    });
+};
+const StyledSpan = styled(Box)`
+  display: block;
+  outline: 1px dashed ${({ theme })=>theme.colors.primary500};
+  outline-offset: -1px;
+`;
+
+export { RepeatableComponent };
+//# sourceMappingURL=Repeatable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Repeatable.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Repeatable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useField, useNotification, useForm } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  TextButton,\n  VisuallyHidden,\n  Accordion,\n  IconButton,\n  useComposedRefs,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Plus, Drag, Trash } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDoc } from '../../../../../hooks/useDocument';\nimport { useDragAndDrop, type UseDragAndDropOptions } from '../../../../../hooks/useDragAndDrop';\nimport { usePrev } from '../../../../../hooks/usePrev';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { Initializer } from './Initializer';\n\nimport type { ComponentInputProps } from './Input';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * RepeatableComponent\n * -----------------------------------------------------------------------------------------------*/\n\ntype RepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst RepeatableComponent = ({\n  attribute,\n  disabled,\n  name,\n  mainField,\n  children,\n  layout,\n}: RepeatableComponentProps) => {\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { search: searchString } = useLocation();\n  const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);\n  const { components } = useDoc();\n\n  const {\n    value = [],\n    error,\n    rawError,\n  } = useField<Schema.Attribute.ComponentValue<`${string}.${string}`, true>>(name);\n  const addFieldRow = useForm('RepeatableComponent', (state) => state.addFieldRow);\n  const moveFieldRow = useForm('RepeatableComponent', (state) => state.moveFieldRow);\n  const removeFieldRow = useForm('RepeatableComponent', (state) => state.removeFieldRow);\n  const { max = Infinity } = attribute;\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n  const [liveText, setLiveText] = React.useState('');\n\n  React.useEffect(() => {\n    const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;\n    const hasNestedValue = value && Array.isArray(value) && value.length > 0;\n\n    if (hasNestedErrors && hasNestedValue) {\n      const errorOpenItems = rawError\n        .map((_: unknown, idx: number) => {\n          return value[idx] ? value[idx].__temp_key__ : null;\n        })\n        .filter((value) => !!value);\n\n      if (errorOpenItems && errorOpenItems.length > 0) {\n        setCollapseToOpen((collapseToOpen) => {\n          if (!errorOpenItems.includes(collapseToOpen)) {\n            return errorOpenItems[0];\n          }\n\n          return collapseToOpen;\n        });\n      }\n    }\n  }, [rawError, value]);\n\n  /**\n   * Get the temp key of the component that has the field that is currently focussed\n   * as defined by the `field` query param. We can then force this specific component\n   * to be in its \"open\" state.\n   */\n  const componentTmpKeyWithFocussedField = React.useMemo(() => {\n    if (search.has('field')) {\n      const fieldParam = search.get('field');\n\n      if (!fieldParam) {\n        return undefined;\n      }\n\n      const [, path] = fieldParam.split(`${name}.`);\n\n      if (getIn(value, path, undefined) !== undefined) {\n        const [subpath] = path.split('.');\n\n        return getIn(value, subpath, undefined)?.__temp_key__;\n      }\n    }\n\n    return undefined;\n  }, [search, name, value]);\n\n  const prevValue = usePrev(value);\n\n  React.useEffect(() => {\n    /**\n     * When we add a new item to the array, we want to open the collapse.\n     */\n    if (prevValue && prevValue.length < value.length) {\n      setCollapseToOpen(value[value.length - 1].__temp_key__);\n    }\n  }, [value, prevValue]);\n\n  React.useEffect(() => {\n    if (typeof componentTmpKeyWithFocussedField === 'string') {\n      setCollapseToOpen(componentTmpKeyWithFocussedField);\n    }\n  }, [componentTmpKeyWithFocussedField]);\n\n  const toggleCollapses = () => {\n    setCollapseToOpen('');\n  };\n\n  const handleClick = () => {\n    if (value.length < max) {\n      const schema = components[attribute.component];\n      const form = createDefaultForm(schema, components);\n      const data = transformDocument(schema, components)(form);\n\n      addFieldRow(name, data);\n      // setCollapseToOpen(nextTempKey);\n    } else if (value.length >= max) {\n      toggleNotification({\n        type: 'info',\n        message: formatMessage({\n          id: getTranslation('components.notification.info.maximum-requirement'),\n        }),\n      });\n    }\n  };\n\n  const handleMoveComponentField: ComponentProps['onMoveItem'] = (newIndex, currentIndex) => {\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.reorder'),\n          defaultMessage: '{item}, moved. New position in list: {position}.',\n        },\n        {\n          item: `${name}.${currentIndex}`,\n          position: getItemPos(newIndex),\n        }\n      )\n    );\n\n    moveFieldRow(name, currentIndex, newIndex);\n  };\n\n  const handleValueChange = (key: string) => {\n    setCollapseToOpen(key);\n  };\n\n  const getItemPos = (index: number) => `${index + 1} of ${value.length}`;\n\n  const handleCancel = (index: number) => {\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.cancel-item'),\n          defaultMessage: '{item}, dropped. Re-order cancelled.',\n        },\n        {\n          item: `${name}.${index}`,\n        }\n      )\n    );\n  };\n\n  const handleGrabItem = (index: number) => {\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.grab-item'),\n          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n        },\n        {\n          item: `${name}.${index}`,\n          position: getItemPos(index),\n        }\n      )\n    );\n  };\n\n  const handleDropItem = (index: number) => {\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.drop-item'),\n          defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n        },\n        {\n          item: `${name}.${index}`,\n          position: getItemPos(index),\n        }\n      )\n    );\n  };\n\n  const ariaDescriptionId = React.useId();\n\n  const level = useComponent('RepeatableComponent', (state) => state.level);\n\n  if (value.length === 0) {\n    return <Initializer disabled={disabled} name={name} onClick={handleClick} />;\n  }\n\n  return (\n    <Box hasRadius>\n      <VisuallyHidden id={ariaDescriptionId}>\n        {formatMessage({\n          id: getTranslation('dnd.instructions'),\n          defaultMessage: `Press spacebar to grab and re-order`,\n        })}\n      </VisuallyHidden>\n      <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n      <AccordionRoot\n        $error={error}\n        value={collapseToOpen}\n        onValueChange={handleValueChange}\n        aria-describedby={ariaDescriptionId}\n      >\n        {value.map(({ __temp_key__: key, id }, index) => {\n          const nameWithIndex = `${name}.${index}`;\n          return (\n            <ComponentProvider\n              key={key}\n              // id is always a number in a component\n              id={id as number}\n              uid={attribute.component}\n              level={level + 1}\n              type=\"repeatable\"\n            >\n              <Component\n                disabled={disabled}\n                name={nameWithIndex}\n                attribute={attribute}\n                index={index}\n                mainField={mainField}\n                onMoveItem={handleMoveComponentField}\n                onDeleteComponent={() => {\n                  removeFieldRow(name, index);\n                  toggleCollapses();\n                }}\n                toggleCollapses={toggleCollapses}\n                onCancel={handleCancel}\n                onDropItem={handleDropItem}\n                onGrabItem={handleGrabItem}\n                __temp_key__={key}\n              >\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 = `${nameWithIndex}.${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                            })}\n                          </ResponsiveGridItem>\n                        );\n                      })}\n                    </ResponsiveGridRoot>\n                  );\n                })}\n              </Component>\n            </ComponentProvider>\n          );\n        })}\n        <TextButtonCustom disabled={disabled} onClick={handleClick} startIcon={<Plus />}>\n          {formatMessage({\n            id: getTranslation('containers.EditView.add.new-entry'),\n            defaultMessage: 'Add an entry',\n          })}\n        </TextButtonCustom>\n      </AccordionRoot>\n    </Box>\n  );\n};\n\nconst AccordionRoot = styled(Accordion.Root)<{ $error?: string }>`\n  border: 1px solid\n    ${({ theme, $error }) => ($error ? theme.colors.danger600 : theme.colors.neutral200)};\n`;\n\nconst TextButtonCustom = styled(TextButton)`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};\n  padding-inline: ${(props) => props.theme.spaces[6]};\n  padding-block: ${(props) => props.theme.spaces[3]};\n\n  &:not([disabled]) {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${(props) => props.theme.colors.primary100};\n    }\n  }\n\n  span {\n    font-weight: 600;\n    font-size: 1.4rem;\n    line-height: 2.4rem;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Field\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel' | 'onMoveItem'>,\n    Pick<RepeatableComponentProps, 'mainField'> {\n  attribute: Schema.Attribute.Component<`${string}.${string}`, boolean>;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onDeleteComponent?: React.MouseEventHandler<HTMLButtonElement>;\n  toggleCollapses: () => void;\n  children: React.ReactNode;\n  __temp_key__: string;\n}\n\nconst Component = ({\n  disabled,\n  index,\n  name,\n  mainField = {\n    name: 'id',\n    type: 'integer',\n  },\n  children,\n  onDeleteComponent,\n  toggleCollapses,\n  __temp_key__,\n  ...dragProps\n}: ComponentProps) => {\n  const { formatMessage } = useIntl();\n\n  const displayValue = useForm('RepeatableComponent', (state) => {\n    return getIn(state.values, [...name.split('.'), mainField.name]);\n  });\n\n  const accordionRef = React.useRef<HTMLButtonElement>(null!);\n\n  /**\n   * The last item in the fieldName array will be the index of this component.\n   * Drag and drop should be isolated to the parent component so nested repeatable\n   * components are not affected by the drag and drop of the parent component in\n   * their own re-ordering context.\n   */\n  const componentKey = name.split('.').slice(0, -1).join('.');\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.COMPONENT}_${componentKey}`,\n      index,\n      item: {\n        index,\n        displayedValue: displayValue,\n      },\n      onStart() {\n        // Close all collapses\n        toggleCollapses();\n      },\n      ...dragProps,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  const composedAccordionRefs = useComposedRefs<HTMLButtonElement>(accordionRef, dragRef);\n  const composedBoxRefs = useComposedRefs<HTMLDivElement>(\n    boxRef as React.RefObject<HTMLDivElement>,\n    dropRef\n  );\n\n  return (\n    <>\n      {isDragging ? (\n        <Preview />\n      ) : (\n        <Accordion.Item ref={composedBoxRefs} value={__temp_key__}>\n          <Accordion.Header>\n            <Accordion.Trigger>{displayValue}</Accordion.Trigger>\n            <Accordion.Actions>\n              <IconButton\n                variant=\"ghost\"\n                onClick={onDeleteComponent}\n                label={formatMessage({\n                  id: getTranslation('containers.Edit.delete'),\n                  defaultMessage: 'Delete',\n                })}\n              >\n                <Trash />\n              </IconButton>\n              <IconButton\n                ref={composedAccordionRefs}\n                variant=\"ghost\"\n                onClick={(e) => e.stopPropagation()}\n                data-handler-id={handlerId}\n                label={formatMessage({\n                  id: getTranslation('components.DragHandle-label'),\n                  defaultMessage: 'Drag',\n                })}\n                onKeyDown={handleKeyDown}\n              >\n                <Drag />\n              </IconButton>\n            </Accordion.Actions>\n          </Accordion.Header>\n          <Accordion.Content>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              background=\"neutral100\"\n              padding={6}\n              gap={6}\n            >\n              {children}\n            </Flex>\n          </Accordion.Content>\n        </Accordion.Item>\n      )}\n    </>\n  );\n};\n\nconst Preview = () => {\n  return <StyledSpan tag=\"span\" padding={6} background=\"primary100\" />;\n};\n\nconst StyledSpan = styled<BoxComponent<'span'>>(Box)`\n  display: block;\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n`;\n\nexport { RepeatableComponent };\nexport type { RepeatableComponentProps };\n"],"names":["RepeatableComponent","attribute","disabled","name","mainField","children","layout","toggleNotification","useNotification","formatMessage","useIntl","search","searchString","useLocation","React","useMemo","URLSearchParams","components","useDoc","value","error","rawError","useField","addFieldRow","useForm","state","moveFieldRow","removeFieldRow","max","Infinity","collapseToOpen","setCollapseToOpen","useState","liveText","setLiveText","useEffect","hasNestedErrors","Array","isArray","length","hasNestedValue","errorOpenItems","map","_","idx","__temp_key__","filter","includes","componentTmpKeyWithFocussedField","has","fieldParam","get","undefined","path","split","getIn","subpath","prevValue","usePrev","toggleCollapses","handleClick","schema","component","form","createDefaultForm","data","transformDocument","type","message","id","getTranslation","handleMoveComponentField","newIndex","currentIndex","defaultMessage","item","position","getItemPos","handleValueChange","key","index","handleCancel","handleGrabItem","handleDropItem","ariaDescriptionId","useId","level","useComponent","_jsx","Initializer","onClick","_jsxs","Box","hasRadius","VisuallyHidden","aria-live","AccordionRoot","$error","onValueChange","aria-describedby","nameWithIndex","ComponentProvider","uid","Component","onMoveItem","onDeleteComponent","onCancel","onDropItem","onGrabItem","row","ResponsiveGridRoot","gap","size","field","completeFieldName","translatedLabel","label","ResponsiveGridItem","col","s","xs","direction","alignItems","TextButtonCustom","startIcon","Plus","styled","Accordion","Root","theme","colors","danger600","neutral200","TextButton","props","spaces","primary100","motion","easings","easeOutQuad","dragProps","displayValue","values","accordionRef","useRef","componentKey","slice","join","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","ItemTypes","COMPONENT","displayedValue","onStart","getEmptyImage","captureDraggingState","composedAccordionRefs","useComposedRefs","composedBoxRefs","_Fragment","Preview","Item","ref","Header","Trigger","Actions","IconButton","variant","Trash","e","stopPropagation","data-handler-id","onKeyDown","Drag","Content","Flex","background","padding","StyledSpan","tag","primary500"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/ComponentContext.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+
+/**
+ * We use this component to wrap any individual component field in the Edit View,
+ * this could be a component field in a dynamic zone, a component within a repeatable space,
+ * or even nested components.
+ *
+ * We primarily need this to provide the component id to the components so that they can
+ * correctly fetch their relations.
+ */ const [ComponentProvider, useComponent] = strapiAdmin.createContext('ComponentContext', {
+    id: undefined,
+    level: -1,
+    uid: undefined,
+    type: undefined
+});
+
+exports.ComponentProvider = ComponentProvider;
+exports.useComponent = useComponent;
+//# sourceMappingURL=ComponentContext.js.map

package/dist/admin/pages/EditView/components/FormInputs/ComponentContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentContext.js","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/ComponentContext.tsx"],"sourcesContent":["import { createContext } from '@strapi/admin/strapi-admin';\n\ninterface ComponentContextValue {\n  /**\n   * The id of the component. It will be undefined if the component\n   * has not been created in the database yet. This could be on a new\n   * or existing entry.\n   */\n  id?: number;\n  /**\n   * The level of the component. This is used to determine the nesting\n   * of the component. The default is set to -1 so that the base level is 0\n   * for the top level component, and increases by 1 for each level of nesting.\n   */\n  level: number;\n  /**\n   * The uid of the component. This is used to determine the type of the\n   * component. Within an attribute, it is normally the `component` value.\n   * It will be undefined if the hook is not called within the confines\n   * of a provider.\n   */\n  uid?: string;\n  /**\n   * The type of component parent. It will be undefined if the hook\n   * is not called within the confines of a provider.\n   */\n  type?: 'dynamiczone' | 'repeatable' | 'component';\n}\n\n/**\n * We use this component to wrap any individual component field in the Edit View,\n * this could be a component field in a dynamic zone, a component within a repeatable space,\n * or even nested components.\n *\n * We primarily need this to provide the component id to the components so that they can\n * correctly fetch their relations.\n */\nconst [ComponentProvider, useComponent] = createContext<ComponentContextValue>('ComponentContext', {\n  id: undefined,\n  level: -1,\n  uid: undefined,\n  type: undefined,\n});\n\nexport { ComponentProvider, useComponent };\n"],"names":["ComponentProvider","useComponent","createContext","id","undefined","level","uid","type"],"mappings":";;;;AA6BA;;;;;;;AAOC,UACK,CAACA,iBAAAA,EAAmBC,YAAa,CAAA,GAAGC,0BAAqC,kBAAoB,EAAA;IACjGC,EAAIC,EAAAA,SAAAA;AACJC,IAAAA,KAAAA,EAAO,CAAC,CAAA;IACRC,GAAKF,EAAAA,SAAAA;IACLG,IAAMH,EAAAA;AACR,CAAA;;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/ComponentContext.mjs

@@ -0,0 +1,18 @@
+import { createContext } from '@strapi/admin/strapi-admin';
+
+/**
+ * We use this component to wrap any individual component field in the Edit View,
+ * this could be a component field in a dynamic zone, a component within a repeatable space,
+ * or even nested components.
+ *
+ * We primarily need this to provide the component id to the components so that they can
+ * correctly fetch their relations.
+ */ const [ComponentProvider, useComponent] = createContext('ComponentContext', {
+    id: undefined,
+    level: -1,
+    uid: undefined,
+    type: undefined
+});
+
+export { ComponentProvider, useComponent };
+//# sourceMappingURL=ComponentContext.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/ComponentContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentContext.mjs","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/ComponentContext.tsx"],"sourcesContent":["import { createContext } from '@strapi/admin/strapi-admin';\n\ninterface ComponentContextValue {\n  /**\n   * The id of the component. It will be undefined if the component\n   * has not been created in the database yet. This could be on a new\n   * or existing entry.\n   */\n  id?: number;\n  /**\n   * The level of the component. This is used to determine the nesting\n   * of the component. The default is set to -1 so that the base level is 0\n   * for the top level component, and increases by 1 for each level of nesting.\n   */\n  level: number;\n  /**\n   * The uid of the component. This is used to determine the type of the\n   * component. Within an attribute, it is normally the `component` value.\n   * It will be undefined if the hook is not called within the confines\n   * of a provider.\n   */\n  uid?: string;\n  /**\n   * The type of component parent. It will be undefined if the hook\n   * is not called within the confines of a provider.\n   */\n  type?: 'dynamiczone' | 'repeatable' | 'component';\n}\n\n/**\n * We use this component to wrap any individual component field in the Edit View,\n * this could be a component field in a dynamic zone, a component within a repeatable space,\n * or even nested components.\n *\n * We primarily need this to provide the component id to the components so that they can\n * correctly fetch their relations.\n */\nconst [ComponentProvider, useComponent] = createContext<ComponentContextValue>('ComponentContext', {\n  id: undefined,\n  level: -1,\n  uid: undefined,\n  type: undefined,\n});\n\nexport { ComponentProvider, useComponent };\n"],"names":["ComponentProvider","useComponent","createContext","id","undefined","level","uid","type"],"mappings":";;AA6BA;;;;;;;AAOC,UACK,CAACA,iBAAAA,EAAmBC,YAAa,CAAA,GAAGC,cAAqC,kBAAoB,EAAA;IACjGC,EAAIC,EAAAA,SAAAA;AACJC,IAAAA,KAAAA,EAAO,CAAC,CAAA;IACRC,GAAKF,EAAAA,SAAAA;IACLG,IAAMH,EAAAA;AACR,CAAA;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+
+const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+        type: "button",
+        onClick: onClick,
+        disabled: isDisabled,
+        background: "neutral0",
+        style: {
+            cursor: isDisabled ? 'not-allowed' : 'pointer'
+        },
+        variant: "tertiary",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            tag: "span",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(StyledAddIcon, {
+                    "aria-hidden": true,
+                    $isOpen: isOpen,
+                    $hasError: hasError && !isOpen
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: hasError && !isOpen ? 'danger600' : 'neutral600',
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
+  height: ${({ theme })=>theme.spaces[6]};
+  width: ${({ theme })=>theme.spaces[6]};
+  transform: ${({ $isOpen })=>$isOpen ? 'rotate(45deg)' : 'rotate(0deg)'};
+
+  > circle {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger200 : theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger600 : theme.colors.neutral500};
+  }
+`;
+const StyledButton = styledComponents.styled(designSystem.Button)`
+  padding-left: ${({ theme })=>theme.spaces[3]};
+  border-radius: 26px;
+  box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  height: 5rem;
+`;
+
+exports.AddComponentButton = AddComponentButton;
+//# sourceMappingURL=AddComponentButton.js.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentButton.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Typography, TypographyComponent } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\ninterface AddComponentButtonProps {\n  children: React.ReactNode;\n  hasError?: boolean;\n  isDisabled?: boolean;\n  isOpen?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n}\n\nconst AddComponentButton = ({\n  hasError,\n  isDisabled,\n  isOpen,\n  children,\n  onClick,\n}: AddComponentButtonProps) => {\n  return (\n    <StyledButton\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      background=\"neutral0\"\n      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      variant=\"tertiary\"\n    >\n      <Flex tag=\"span\" gap={2}>\n        <StyledAddIcon aria-hidden $isOpen={isOpen} $hasError={hasError && !isOpen} />\n        <Typography\n          variant=\"pi\"\n          fontWeight=\"bold\"\n          textColor={hasError && !isOpen ? 'danger600' : 'neutral600'}\n        >\n          {children}\n        </Typography>\n      </Flex>\n    </StyledButton>\n  );\n};\n\nconst StyledAddIcon = styled(PlusCircle)<{ $isOpen?: boolean; $hasError?: boolean }>`\n  height: ${({ theme }) => theme.spaces[6]};\n  width: ${({ theme }) => theme.spaces[6]};\n  transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};\n\n  > circle {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger200 : theme.colors.neutral150};\n  }\n  > path {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger600 : theme.colors.neutral500};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  border-radius: 26px;\n  box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  height: 5rem;\n`;\n\nexport { AddComponentButton };\nexport type { AddComponentButtonProps };\n"],"names":["AddComponentButton","hasError","isDisabled","isOpen","children","onClick","_jsx","StyledButton","type","disabled","background","style","cursor","variant","_jsxs","Flex","tag","gap","StyledAddIcon","aria-hidden","$isOpen","$hasError","Typography","fontWeight","textColor","styled","PlusCircle","theme","spaces","colors","danger200","neutral150","danger600","neutral500","Button","shadows","filterShadow"],"mappings":";;;;;;;;AAcA,MAAMA,kBAAqB,GAAA,CAAC,EAC1BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACiB,GAAA;AACxB,IAAA,qBACEC,cAACC,CAAAA,YAAAA,EAAAA;QACCC,IAAK,EAAA,QAAA;QACLH,OAASA,EAAAA,OAAAA;QACTI,QAAUP,EAAAA,UAAAA;QACVQ,UAAW,EAAA,UAAA;QACXC,KAAO,EAAA;AAAEC,YAAAA,MAAAA,EAAQV,aAAa,aAAgB,GAAA;AAAU,SAAA;QACxDW,OAAQ,EAAA,UAAA;AAER,QAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,GAAI,EAAA,MAAA;YAAOC,GAAK,EAAA,CAAA;;8BACpBX,cAACY,CAAAA,aAAAA,EAAAA;oBAAcC,aAAW,EAAA,IAAA;oBAACC,OAASjB,EAAAA,MAAAA;AAAQkB,oBAAAA,SAAAA,EAAWpB,YAAY,CAACE;;8BACpEG,cAACgB,CAAAA,uBAAAA,EAAAA;oBACCT,OAAQ,EAAA,IAAA;oBACRU,UAAW,EAAA,MAAA;oBACXC,SAAWvB,EAAAA,QAAAA,IAAY,CAACE,MAAAA,GAAS,WAAc,GAAA,YAAA;AAE9CC,oBAAAA,QAAAA,EAAAA;;;;;AAKX;AAEA,MAAMc,aAAAA,GAAgBO,uBAAOC,CAAAA,gBAAAA,CAAuD;UAC1E,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;SAClC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,aAAA,EAAE,CAAC,EAAER,OAAO,EAAE,GAAMA,OAAAA,GAAU,kBAAkB,cAAgB,CAAA;;;AAGnE,UAAA,EAAE,CAAC,EAAEO,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAME,CAAAA,MAAM,CAACC,SAAS,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;;;AAGzD,UAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAME,CAAAA,MAAM,CAACG,SAAS,GAAGL,MAAME,MAAM,CAACI,UAAU,CAAC;;AAEnE,CAAC;AAED,MAAM1B,YAAAA,GAAekB,uBAAOS,CAAAA,mBAAAA,CAAO;gBACnB,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;cAEnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,OAAO,CAACC,YAAY,CAAC;;AAE1D,CAAC;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.mjs

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Button, Flex, Typography } from '@strapi/design-system';
+import { PlusCircle } from '@strapi/icons';
+import { styled } from 'styled-components';
+
+const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick })=>{
+    return /*#__PURE__*/ jsx(StyledButton, {
+        type: "button",
+        onClick: onClick,
+        disabled: isDisabled,
+        background: "neutral0",
+        style: {
+            cursor: isDisabled ? 'not-allowed' : 'pointer'
+        },
+        variant: "tertiary",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            tag: "span",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsx(StyledAddIcon, {
+                    "aria-hidden": true,
+                    $isOpen: isOpen,
+                    $hasError: hasError && !isOpen
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: hasError && !isOpen ? 'danger600' : 'neutral600',
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const StyledAddIcon = styled(PlusCircle)`
+  height: ${({ theme })=>theme.spaces[6]};
+  width: ${({ theme })=>theme.spaces[6]};
+  transform: ${({ $isOpen })=>$isOpen ? 'rotate(45deg)' : 'rotate(0deg)'};
+
+  > circle {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger200 : theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger600 : theme.colors.neutral500};
+  }
+`;
+const StyledButton = styled(Button)`
+  padding-left: ${({ theme })=>theme.spaces[3]};
+  border-radius: 26px;
+  box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  height: 5rem;
+`;
+
+export { AddComponentButton };
+//# sourceMappingURL=AddComponentButton.mjs.map