@sparrowengg/integrations-templates-frontend 1.9.63 → 1.9.64

package/dist/es/node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js

@@ -1,10 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { styled } from '../stitches.config.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import { clsx } from '../packages/react-components/node_modules/clsx/dist/clsx.js';
+import { prefixClassName } from '../utils/prefix-class-name.js';
 import { Box } from '../box/box.js';
-import '../button/button.js';
-import { IconButton } from '../button/icon-button.js';
-import '../button/split-button.js';
+import { styled } from '../stitches.config.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -38,140 +37,343 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const CloseIcon = () => {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
-      width: "10",
-      height: "10",
-      viewBox: "0 0 10 10",
-      fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M1 1L9 9",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M9 1L1 9",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
+      width: "20",
+      height: "20",
+      fill: "none",
+      viewBox: "0 0 20 20",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M2.5 10a7.5 7.5 0 1015.001-.001A7.5 7.5 0 002.5 10zm4.448 3.052a.781.781 0 010-1.104L8.895 10 6.948 8.052a.781.781 0 011.104-1.104L10 8.895l1.948-1.947a.781.781 0 111.104 1.104L11.105 10l1.947 1.948a.781.781 0 11-1.104 1.104L10 11.105l-1.948 1.947a.781.781 0 01-1.104 0z",
+          clipRule: "evenodd"
+        }
+      )
     }
   );
 };
-const StyledCloseButton = styled(IconButton, {});
+const StyledCloseButton = styled("button", {
+  border: "none",
+  background: "transparent",
+  color: "inherit",
+  cursor: "pointer",
+  borderRadius: "$round",
+  outline: "none",
+  padding: 0,
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: "inset 0 0 0 3px $colors$negative300"
+  },
+  svg: {
+    width: "100%",
+    height: "100%",
+    display: "block"
+  }
+});
+const SideElementContainer = styled("span", {
+  display: "inline-flex",
+  svg: {
+    width: "100%",
+    height: "100%"
+  }
+});
+const StyledChipContent = styled("span", {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "$2",
+  height: "100%",
+  position: "relative",
+  borderRadius: "inherit",
+  backgroundColor: "inherit"
+});
+const CLASSNAMES = {
+  addonElementStart: prefixClassName("addon-element--start"),
+  addonElementEnd: prefixClassName("addon-element--end"),
+  chip: prefixClassName("chip"),
+  chipContent: prefixClassName("chip__content"),
+  chipWithAddonStart: `${prefixClassName("chip")}--with-addon-start`,
+  chipWithAddonEnd: `${prefixClassName("chip")}--with-addon-end`
+};
 const StyledChip = styled(Box, {
   display: "inline-flex",
   flexShrink: "0",
   alignItems: "center",
-  gap: "$2",
   outline: "none",
+  position: "relative",
   "&:focus-visible": {
     $$shadowColor: "$colors$primary300",
     boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
   },
+  "&:before": {
+    content: "",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    left: 0,
+    top: 0,
+    borderRadius: "inherit",
+    backgroundColor: "$white900"
+  },
+  [`& .${CLASSNAMES.addonElementEnd}`]: {
+    color: "$black600"
+  },
   variants: {
     size: {
+      xl: {
+        height: "$10",
+        fontSize: "$md",
+        fontWeight: "$5",
+        lineHeight: "$md",
+        [`& ${StyledChipContent}`]: {
+          gap: "$2",
+          padding: "0 $7"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$5"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$5"
+        },
+        [`& ${StyledCloseButton}`]: {
+          height: "$5",
+          width: "$5"
+        },
+        [`& ${SideElementContainer}`]: {
+          width: "$5",
+          height: "$5"
+        }
+      },
       lg: {
         height: "$8",
-        padding: "$3 $4",
         fontSize: "$sm",
-        fontWeight: "$4",
-        lineHeight: "$sm"
+        fontWeight: "$5",
+        lineHeight: "$sm",
+        [`& ${StyledChipContent}`]: {
+          gap: "$2",
+          padding: "0 $5"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$3"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$3"
+        },
+        [`& ${StyledCloseButton}`]: {
+          height: "$5",
+          width: "$5"
+        },
+        [`& ${SideElementContainer}`]: {
+          width: "$5",
+          height: "$5"
+        }
       },
       md: {
         height: "$6",
-        padding: "$2 $4",
         fontSize: "$xs",
-        fontWeight: "$4",
+        fontWeight: "$5",
         lineHeight: "$xs",
+        [`& ${StyledChipContent}`]: {
+          gap: "$1",
+          padding: "0 $4"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$2"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$2"
+        },
         [`& ${StyledCloseButton}`]: {
-          height: "$3",
-          width: "$3"
+          height: "$4",
+          width: "$4"
         },
-        [`& ${StyledCloseButton} svg`]: {
-          height: "6px",
-          width: "6px"
+        [`& ${SideElementContainer}`]: {
+          width: "$4",
+          height: "$4"
         }
       },
       sm: {
         height: "$5",
-        padding: "$1 $3",
         fontSize: "$xs",
-        fontWeight: "$4",
+        fontWeight: "$5",
         lineHeight: "$xs",
+        [`& ${StyledChipContent}`]: {
+          gap: "$1",
+          padding: "0 $3"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$2"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$2"
+        },
         [`& ${StyledCloseButton}`]: {
-          height: "$3",
-          width: "$3"
+          height: "$4",
+          width: "$4"
         },
-        [`& ${StyledCloseButton} svg`]: {
-          height: "6px",
-          width: "6px"
+        [`& ${SideElementContainer}`]: {
+          width: "$4",
+          height: "$4"
         }
       },
       xs: {
         height: "$4",
-        padding: "$1 $3",
-        fontSize: "$xxs",
+        fontSize: "$xs",
         fontWeight: "$5",
         lineHeight: "$xxs",
+        letterSpacing: "0.444px",
+        [`& ${StyledChipContent}`]: {
+          gap: "$1",
+          padding: "0 $3"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$2"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$2"
+        },
+        [`& ${StyledCloseButton}`]: {
+          height: "14px",
+          width: "14px"
+        },
+        [`& ${SideElementContainer}`]: {
+          width: "14px",
+          height: "14px"
+        }
+      },
+      "2xs": {
+        height: "$3",
+        fontSize: "$xxs",
+        fontWeight: "$7",
+        lineHeight: "$xxs",
+        letterSpacing: "0.185px",
+        [`& ${StyledChipContent}`]: {
+          gap: "$1",
+          padding: "0 $2"
+        },
+        [`&.${CLASSNAMES.chipWithAddonStart} ${StyledChipContent}`]: {
+          paddingLeft: "$1"
+        },
+        [`&.${CLASSNAMES.chipWithAddonEnd} ${StyledChipContent},
+          &.closable ${StyledChipContent}`]: {
+          paddingRight: "$1"
+        },
         [`& ${StyledCloseButton}`]: {
-          marginInlineStart: "$1",
           height: "$2",
           width: "$2"
         },
-        [`& ${StyledCloseButton} svg`]: {
-          height: "$1",
-          width: "$1"
+        [`& ${SideElementContainer}`]: {
+          width: "$2",
+          height: "$2"
         }
       }
     },
     color: {
       default: {
-        background: "$black100",
         color: "$neutral900",
+        backgroundColor: "$neutral100",
         [`& ${StyledCloseButton}`]: {
-          background: "$black400"
+          color: "$neutral500"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$neutral800"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$neutral800"
         }
       },
       primary: {
-        background: "$primary200",
-        color: "$primary900",
+        color: "$primary700",
+        backgroundColor: "$primary50",
+        [`& ${StyledCloseButton}`]: {
+          color: "$primary400"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$primary500"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$primary500"
+        }
+      },
+      secondary: {
+        color: "$white900",
+        backgroundColor: "$secondary500",
         [`& ${StyledCloseButton}`]: {
-          background: "$primary900"
+          color: "$white800"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$white900"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$secondary500"
         }
       },
       error: {
-        background: "$negative200",
-        color: "$negative700",
+        color: "$negative800",
+        backgroundColor: "$negative100",
         [`& ${StyledCloseButton}`]: {
-          background: "$negative700"
+          color: "$negative600"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$negative800"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$negative500"
         }
       },
       warning: {
-        background: "$warning100",
-        color: "$warning900",
+        color: "$warning800",
+        backgroundColor: "$warning100",
         [`& ${StyledCloseButton}`]: {
-          background: "$warning900"
+          color: "$warning700"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$warning800"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$warning500"
         }
       },
       success: {
-        background: "$positive200",
-        color: "$positive700",
+        color: "$positive800",
+        backgroundColor: "$positive100",
         [`& ${StyledCloseButton}`]: {
-          background: "$positive700"
+          color: "$positive600"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$positive800"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$positive500"
+        }
+      },
+      accent: {
+        color: "$accent800",
+        backgroundColor: "$accent100",
+        [`& ${StyledCloseButton}`]: {
+          color: "$accent500"
+        },
+        [`&.closable ${StyledCloseButton}:hover,
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$accent800"
+        },
+        [`& .${CLASSNAMES.addonElementStart}`]: {
+          color: "$accent500"
         }
       }
     },
@@ -185,20 +387,333 @@ const StyledChip = styled(Box, {
     },
     variant: {
       outline: {
-        background: "$white900"
+        backgroundColor: "$white900",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        color: "$secondary800"
       },
       solid: {
         unset: "none"
       }
+    },
+    selectable: {
+      true: {
+        color: "$secondary800",
+        cursor: "pointer",
+        [`& ${StyledChipContent}`]: {
+          color: "$secondary800"
+        }
+      }
     }
   },
   compoundVariants: [
+    {
+      size: "lg",
+      rounded: "sm",
+      css: {
+        borderRadius: "$lg"
+      }
+    },
+    {
+      size: "md",
+      rounded: "sm",
+      css: {
+        borderRadius: "$lg"
+      }
+    },
+    {
+      size: "3xs",
+      rounded: "sm",
+      css: {
+        borderRadius: "$xs"
+      }
+    },
+    /* Outline variants */
     {
       color: "default",
       variant: "outline",
       css: {
-        background: "$white900",
-        border: "$borderWidths$xs solid $colors$black300"
+        borderColorOpacity: ["$black900", 0.15],
+        backgroundColor: "$white900",
+        color: "$secondary900",
+        [`& ${StyledCloseButton}`]: {
+          color: "$black500"
+        },
+        [`&.closable ${StyledCloseButton}:hover, 
+          &.closable ${StyledCloseButton}:focus-within`]: {
+          color: "$black600"
+        }
+      }
+    },
+    {
+      color: "primary",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$primary500", 0.2],
+        backgroundColor: "$white900",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$primary500"
+        }
+      }
+    },
+    {
+      color: "secondary",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$secondary500", 0.2],
+        backgroundColor: "$secondary500",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$secondary500"
+        }
+      }
+    },
+    {
+      color: "success",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$positive500", 0.2],
+        backgroundColor: "$white900",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$positive500"
+        }
+      }
+    },
+    {
+      color: "warning",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$warning500", 0.2],
+        backgroundColor: "$white900",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$warning500"
+        }
+      }
+    },
+    {
+      color: "error",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$negative500", 0.2],
+        backgroundColor: "$white900",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$negative500"
+        }
+      }
+    },
+    {
+      color: "accent",
+      variant: "outline",
+      css: {
+        borderColorOpacity: ["$accent500", 0.2],
+        backgroundColor: "$white900",
+        color: "$secondary800",
+        [`& ${StyledCloseButton}`]: {
+          color: "$accent500"
+        }
+      }
+    },
+    /* Solid selectable badge variants */
+    {
+      color: "primary",
+      variant: "solid",
+      selectable: true,
+      css: {
+        color: "$secondary800",
+        backgroundColorOpacity: ["$primary500", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$primary500", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$primary500", 0.2]
+        }
+      }
+    },
+    {
+      color: "secondary",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$secondary500", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$secondary500", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$secondary500", 0.2]
+        }
+      }
+    },
+    {
+      color: "default",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$black900", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$black900", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$black900", 0.2]
+        }
+      }
+    },
+    {
+      color: "accent",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$accent500", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$accent500", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$accent500", 0.2]
+        }
+      }
+    },
+    {
+      color: "success",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$positive500", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$positive500", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$positive500", 0.2]
+        }
+      }
+    },
+    {
+      color: "warning",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$warning600", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$warning600", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$warning600", 0.2]
+        }
+      }
+    },
+    {
+      color: "error",
+      variant: "solid",
+      selectable: true,
+      css: {
+        backgroundColorOpacity: ["$negative600", 0.1],
+        "&:hover": {
+          backgroundColorOpacity: ["$negative600", 0.15]
+        },
+        "&.active": {
+          backgroundColorOpacity: ["$negative600", 0.2]
+        }
+      }
+    },
+    /* Outline selectable badge variants */
+    {
+      color: "primary",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$primary500", 0.05]
+        },
+        "&.active": {
+          borderColor: "$primary400",
+          backgroundColorOpacity: ["$primary500", 0.1]
+        }
+      }
+    },
+    {
+      color: "secondary",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$secondary500", 0.05]
+        },
+        "&.active": {
+          borderColor: "$secondary400",
+          backgroundColorOpacity: ["$secondary500", 0.1]
+        }
+      }
+    },
+    {
+      color: "default",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$black900", 0.05]
+        },
+        "&.active": {
+          borderColor: "$black400",
+          backgroundColorOpacity: ["$black900", 0.1]
+        }
+      }
+    },
+    {
+      color: "error",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$negative600", 0.05]
+        },
+        "&.active": {
+          borderColor: "$negative400",
+          backgroundColorOpacity: ["$negative600", 0.1]
+        }
+      }
+    },
+    {
+      color: "warning",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$warning600", 0.05]
+        },
+        "&.active": {
+          borderColor: "$warning400",
+          backgroundColorOpacity: ["$warning600", 0.1]
+        }
+      }
+    },
+    {
+      color: "success",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$positive500", 0.05]
+        },
+        "&.active": {
+          borderColor: "$positive400",
+          backgroundColorOpacity: ["$positive500", 0.1]
+        }
+      }
+    },
+    {
+      color: "accent",
+      variant: "outline",
+      selectable: true,
+      css: {
+        "&:hover": {
+          backgroundColorOpacity: ["$accent500", 0.05]
+        },
+        "&.active": {
+          borderColor: "$accent400",
+          backgroundColorOpacity: ["$accent500", 0.1]
+        }
       }
     }
   ],
@@ -213,38 +728,95 @@ const Chip = React__default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       color,
+      onClose,
       closable,
       children,
-      onClose
+      leftElement,
+      rightElement,
+      defaultActive,
+      active,
+      onActiveStateChange
     } = _b, props = __objRest(_b, [
       "color",
+      "onClose",
       "closable",
       "children",
-      "onClose"
+      "leftElement",
+      "rightElement",
+      "defaultActive",
+      "active",
+      "onActiveStateChange"
     ]);
-    return /* @__PURE__ */ jsxs(
+    const [isActive, setIsActive] = useState(defaultActive != null ? defaultActive : false);
+    const handleChange = () => {
+      if (typeof active === "boolean") {
+        if (onActiveStateChange) {
+          onActiveStateChange(!active);
+        } else {
+          console.warn(
+            "You provided 'active' prop without 'onActiveStateChange'"
+          );
+        }
+        return;
+      }
+      if (onActiveStateChange) {
+        onActiveStateChange(!isActive);
+      }
+      setIsActive(!isActive);
+    };
+    return /* @__PURE__ */ jsx(
       StyledChip,
       __spreadProps(__spreadValues({
         ref,
         "data-testid": "chip",
         tabIndex: 0,
-        color
+        color,
+        onClick: handleChange,
+        onKeyDown: (e) => {
+          if (e.key === " ") {
+            e.preventDefault();
+            handleChange();
+          }
+        }
       }, props), {
-        children: [
+        className: clsx(
+          CLASSNAMES.chip,
+          {
+            active: active != null ? active : isActive,
+            closable,
+            [CLASSNAMES.chipWithAddonStart]: !!leftElement,
+            [CLASSNAMES.chipWithAddonEnd]: !!rightElement
+          },
+          props.className
+        ),
+        children: /* @__PURE__ */ jsxs(StyledChipContent, { className: CLASSNAMES.chipContent, children: [
+          leftElement && /* @__PURE__ */ jsx(
+            SideElementContainer,
+            {
+              className: CLASSNAMES.addonElementStart,
+              "data-testid": "left-element",
+              children: leftElement
+            }
+          ),
           children,
           closable && /* @__PURE__ */ jsx(
             StyledCloseButton,
-            __spreadValues({
-              size: "xxs",
-              css: {
-                background: "transparent",
-                borderRadius: "$round",
-                marginInlineStart: "$2"
-              },
-              icon: /* @__PURE__ */ jsx(CloseIcon, {})
-            }, onClose && { onClick: onClose })
+            __spreadProps(__spreadValues({
+              "data-testid": "close-button",
+              type: "button"
+            }, onClose && { onClick: onClose }), {
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            })
+          ),
+          rightElement && /* @__PURE__ */ jsx(
+            SideElementContainer,
+            {
+              className: CLASSNAMES.addonElementEnd,
+              "data-testid": "right-element",
+              children: rightElement
+            }
           )
-        ]
+        ] })
       })
     );
   }