@bigbinary/neeto-molecules 5.2.27 → 5.2.28

package/dist/v2/OptionFields.js

@@ -62,7 +62,6 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
   };
   return /*#__PURE__*/jsxs(Dialog, {
     isOpen: isOpen,
-    "aria-describedby": undefined,
     onClose: handleClose,
     children: [/*#__PURE__*/jsx(Dialog.Header, {
       children: /*#__PURE__*/jsx(Dialog.Title, {
@@ -82,6 +81,7 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
             Link: /*#__PURE__*/jsx(Button, {
               className: "text-xs",
               href: bulkAddHelpDocUrl,
+              rel: "noreferrer",
               target: "_blank",
               variant: "link"
             })
@@ -157,13 +157,14 @@ var OptionActions = withT(function (_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center gap-1 ".concat(className),
+    className: "flex items-center gap-2 ".concat(className),
     children: [!hideCloneOption && /*#__PURE__*/jsx(Button, {
       disabled: disabled,
-      className: "p-0.5",
       "data-testid": "clone-option-button-".concat(optionIndex),
-      icon: Copy,
-      size: "sm",
+      icon: /*#__PURE__*/jsx(Copy, {
+        className: "size-4"
+      }),
+      size: "icon-xs",
       variant: "ghost",
       tooltipProps: {
         content: t("neetoMolecules.common.actions.clone"),
@@ -174,10 +175,11 @@ var OptionActions = withT(function (_ref) {
       }
     }), !hideDeleteOption && /*#__PURE__*/jsx(Button, {
       disabled: disabled,
-      className: "p-0.5",
       "data-testid": "delete-option-button-".concat(optionIndex),
-      icon: Trash2,
-      size: "sm",
+      icon: /*#__PURE__*/jsx(Trash2, {
+        className: "size-4"
+      }),
+      size: "icon-xs",
       variant: "ghost",
       tooltipProps: {
         content: t("neetoMolecules.common.actions.delete"),
@@ -250,7 +252,7 @@ var EditorOption = function EditorOption(_ref) {
             _onBlur === null || _onBlur === void 0 || _onBlur(id, value);
           }
         }), /*#__PURE__*/jsx("div", {
-          className: "absolute end-2 top-2",
+          className: "absolute end-2 top-0 flex h-[34px] items-center",
           children: /*#__PURE__*/jsx(OptionActions, {
             arrayHelpers: arrayHelpers,
             disabled: disabled,
@@ -311,6 +313,11 @@ var ImageOption = function ImageOption(_ref) {
       fieldType: "image"
     });
   };
+
+  // The actions are absolutely positioned, so the card has to reserve room for
+  // them: the end-2 inset, 24px per button plus the 8px gap between them, and a
+  // trailing 8px matching the card's own padding.
+  var actionCount = (hideCloneOption ? 0 : 1) + (hideDeleteOption ? 0 : 1);
   return /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
     ref: innerRef
   }, _objectSpread$6(_objectSpread$6({}, draggableProps), dragHandleProps)), {}, {
@@ -327,7 +334,10 @@ var ImageOption = function ImageOption(_ref) {
           "pointer-events-none opacity-80": disabled
         }),
         children: /*#__PURE__*/jsxs("div", {
-          className: "border-border bg-background group relative flex w-full flex-col gap-2 rounded-lg border p-2 pe-8",
+          className: classnames("border-border bg-card group relative flex w-full flex-col gap-2 rounded-lg border p-2", {
+            "pe-10": actionCount === 1,
+            "pe-18": actionCount === 2
+          }),
           children: [/*#__PURE__*/jsx("div", {
             className: "flex-shrink-0",
             "data-testid": "picture-choice-option-".concat(optionIndex),
@@ -462,7 +472,12 @@ var InputOption = function InputOption(_ref) {
           autoFocus: shouldFocus,
           className: "flex-1",
           "data-testid": "".concat(isTextArea ? "option-textarea" : "option-input", "-").concat(optionIndex),
-          suffix: /*#__PURE__*/jsx(OptionActions, {
+          suffix:
+          /*#__PURE__*/
+          // `size-auto` overrides the icon-size class atoms injects into
+          // addons, which would otherwise collapse the actions to 16px and
+          // clip the second button when cloning is enabled.
+          jsx(OptionActions, {
             arrayHelpers: arrayHelpers,
             disabled: disabled,
             hideCloneOption: hideCloneOption,
@@ -470,7 +485,8 @@ var InputOption = function InputOption(_ref) {
             id: id,
             onClone: onClone,
             onDelete: onDelete,
-            optionIndex: optionIndex
+            optionIndex: optionIndex,
+            className: "size-auto"
           }),
           onChange: function onChange(_ref2) {
             var target = _ref2.target;
@@ -716,7 +732,8 @@ var FormError = function FormError(_ref) {
   var error = _ref.error;
   if (isNotPresent(error) || typeof error !== "string") return null;
   return /*#__PURE__*/jsx(Typography, {
-    className: "text-destructive mt-1",
+    className: "mt-1",
+    color: "destructive",
     "data-testid": "validation-error-container",
     variant: "body3",
     children: error
@@ -941,10 +958,10 @@ var BlockOption = withT(function (_ref) {
     ref: innerRef
   }, draggableProps), dragHandleProps), {}, {
     children: /*#__PURE__*/jsxs("div", {
-      className: "border-border hover:bg-muted group relative ms-3 mb-2 flex h-10 cursor-pointer items-center gap-2 rounded border p-3 shadow-xs transition-colors duration-300 ease-in-out",
+      className: "border-border hover:bg-muted group relative ms-3 mb-2 flex h-10 cursor-pointer items-center gap-2 rounded-lg border p-3 shadow-xs transition-colors duration-300 ease-in-out",
       "data-testid": "address-field-block",
       children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
-        className: "absolute -start-0.5 top-1/2 -translate-x-full -translate-y-1/2",
+        className: "absolute -start-0.5 top-1/2 -translate-x-full -translate-y-1/2 rtl:translate-x-full",
         "data-testid": "drag-handle-".concat(optionIndex)
       })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
         name: name,
@@ -959,10 +976,12 @@ var BlockOption = withT(function (_ref) {
       }), /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100",
         children: [/*#__PURE__*/jsx(Button, {
-          className: "hover:bg-muted rounded p-1",
+          className: "hover:bg-muted",
           "data-testid": "address-field-edit-button",
-          icon: Pencil,
-          size: "sm",
+          icon: /*#__PURE__*/jsx(Pencil, {
+            className: "size-4"
+          }),
+          size: "icon-xs",
           variant: "ghost",
           tooltipProps: {
             content: t("neetoMolecules.common.actions.edit"),
@@ -978,7 +997,6 @@ var BlockOption = withT(function (_ref) {
           id: id,
           onClone: onClone,
           optionIndex: optionIndex,
-          className: "flex items-center gap-2",
           onDelete: handleDeleteClick
         })]
       })]
@@ -1268,7 +1286,7 @@ var OptionFields = function OptionFields(_ref) {
           disabled: !isEditable,
           label: t("neetoMolecules.optionFields.addBulk"),
           size: "sm",
-          variant: "ghost",
+          variant: "link",
           onClick: function onClick() {
             return setIsBulkOptionModalOpen(true);
           }